0

Hola estoy tratando de hacer una sección donde el contenido se muestra aleatoriamente. Para esto estoy utilizando lo siguiente.

  1. El contenido que se refresca cada x segundos.
  2. Una barra de progreso que muestra el tiempo antes de refrescar
  3. 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"/>

1 respuesta 1

0

Para detener un setInterval puedes usar el método clearInterval(). Funciona así:

var miInterval = setInterval(function () { // Imprime hola cada 1 segundo
    console.log('Hola!');
}, 1000);

function detener() {
    clearInterval(miInterval);
}

En tu caso tendrías que hacer clearInterval(animate) para que la barra se detenga.

Puedes encontrar más información sobre la funcióin clearInterval() en este enlace: https://www.w3schools.com/jsref/met_win_clearinterval.asp

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.