Hola estoy tratando de hacer una sección donde el contenido se muestra aleatoriamente. Para esto estoy utilizando lo siguiente.
- El contenido que se refresca cada x segundos.
- Una barra de progreso que muestra el tiempo antes de refrescar
- Un toogle on/off para activar y desactivar el auto/refresco.
Me he encontrado con el siguiente inconveniente; que cuando desactivas el refresco la barra de progreso continua corriendo y el resultado super raro.
Mi pregunta sería ¿como puedo sincronizar el toogle con la barra de progreso para que este se detenga una vez desactivas y viceversa?
Soy muy torpe con javascript no es muy fuerte espero que me pueda ayudar.
function reFresh()
{
window.open(location.reload(true))
}
var repeticion = window.setInterval("reFresh()",30000);
UIkit.util.ready(function () {
var bar = document.getElementById('js-progressbar');
var animate = setInterval(function () {
bar.value += 10;
if (bar.value >= bar.max) {
clearInterval(animate);
}
}, 3300);
});
<div class="uk-grid-collapse uk-child-width-expand@m uk-margin" uk-grid uk-scrollspy="cls: uk-animation-fade; target: > div > delay: 500; repeat: true">
<div class="uk-flex uk-flex-middle uk-flex-center">
<div class="uk-card-body uk-width-expand uk-text-center uk-light uk-padding-small">
<!-- Aqui el contenido -->
<?php if ($this->checkPosition('letra_cancion')) : ?>
<p><?php echo $this->renderPosition('letra_cancion'); ?></p><?php endif; ?>
<!-- Fin del contenido -->
</div>
</div>
</div>
<!-- Boton para refrescar manual -->
<div class="uk-text-center uk-padding-small">
<a id="actualizar" href="javascript:location.reload()" onclick="UIkit.notification({message: 'Volai-vai OUTRA!...', pos: 'top-center'})"><span uk-icon="icon: refresh; ratio: 1.5" uk-tooltip="Refrescar cantiga"></span></a>
</div>
<!-- Control de auto/refrescar -->
<div class="uk-text-center" uk-tooltip="Desactivar Aleatoria">
<form class="toogle-dn" action="" onclick="window.clearInterval(repeticion);"><input class="toogle-dni" type="checkbox" id="toogle" /><label class="toogle-dni" for="toogle"></label></form>
</div>
<div class="progresgh"><progress id="js-progressbar" class="uk-progress parapan" value="10" max="100"></progress></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.17/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.17/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.17/css/uikit.min.css" rel="stylesheet"/>