Progress Bar Control ON / OFF

Navigation
0

Hi, I'm trying to make a section where the content is displayed randomly. For this I am using the following.

  • Content that refreshes every x seconds.
  • A progress bar showing the time before refreshing
  • A toogle on / off to activate and deactivate the auto / refresh.

    • I have encountered the following inconvenience; that when you turn off the refresh the progress bar keeps running and the result is weird.

    My question would be how can I synchronize the toogle with the progress bar so that it stops once it is deactivated and vice versa?

    I'm very clumsy with javascript is not very strong I hope you can help me. 

    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"/>
        
    asked by Diego Pintos 05.11.2018 в 13:01
    source

    1 answer

    0

    To stop a setInterval you can use the clearInterval() method. It works like this: 

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

function detener() {
    clearInterval(miInterval);
}

    In your case you would have to do clearInterval(animate) for the bar to stop.

    You can find more information about the clearInterval() function at this link: link

        
    answered by 05.11.2018 в 13:30
    HTTP Error 500.19 - Internal Server Error HTML to use script only in Internet Explorer