loop - timer javascript

Javascript-Pausing setInterval()

Question

¿Cómo hago una pausa y reanudo la función setInterval () usando Javascript?

Por ejemplo, tal vez tenga un cronómetro para decirle la cantidad de segundos que ha estado mirando la página web. Hay un botón ''Pausa'' y ''Reanudar''. La razón por la que clearInterval () no funcionaría aquí es porque si el usuario hace clic en el botón "Pausa" en los 40 segundos y 800 milisegundos, cuando hace clic en el botón "Reanudar", la cantidad de segundos transcurridos debe aumentar en 1 después de 200 milisegundos. Si uso la función clearInterval () en la variable del temporizador (cuando se hace clic en el botón de pausa) y luego se usa nuevamente la función setInterval () en la variable del temporizador (cuando se hace clic en el botón de reanudar), el número de segundos transcurridos aumentará en 1 solo después de 1000 milisegundos, lo que destruye la precisión del cronómetro.

Entonces, ¿cómo hago eso?

Answer 1

¿Por qué no utilizar un enfoque más simple? Añadir una clase!

Simplemente agregue una clase que le indique al intervalo que no haga nada. Por ejemplo: en hover.

var i = 0;
this.setInterval(function() {
  if(!$(''#counter'').hasClass(''pauseInterval'')) { //only run if it hasn''t got this class ''pauseInterval''
    console.log(''Counting...'');
    $(''#counter'').html(i++); //just for explaining and showing
  } else {
    console.log(''Stopped counting'');
  }
}, 500);

/* In this example, I''m adding a class on mouseover and remove it again on mouseleave. You can of course do pretty much whatever you like */
$(''#counter'').hover(function() { //mouse enter
    $(this).addClass(''pauseInterval'');
  },function() { //mouse leave
    $(this).removeClass(''pauseInterval'');
  }
);

/* Other example */
$(''#pauseInterval'').click(function() {
  $(''#counter'').toggleClass(''pauseInterval'');
});

body {
  background-color: #eee;
  font-family: Calibri, Arial, sans-serif;
}
#counter {
  width: 50%;
  background: #ddd;
  border: 2px solid #009afd;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  transition: .3s;
  margin: 0 auto;
}
#counter.pauseInterval {
  border-color: red;  
}

<!-- you''ll need jQuery for this. If you really want a vanilla version, ask -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p id="counter">&nbsp;</p>
<button id="pauseInterval">Pause</button></p>

He estado buscando este enfoque rápido y fácil durante años, así que estoy publicando varias versiones para presentarle a la mayor cantidad de personas posible.

Answer 2

Mientras que @Jonas Giuro tiene razón cuando dice que:

No puede PAUSAR la función setInterval, puede detenerla (clearInterval) o dejarla ejecutar

Por otro lado, este comportamiento se puede simular con el enfoque sugerido por @VitaliyG :

No debes medir el tiempo en función de intervalo. En su lugar, simplemente ahorre tiempo cuando se inició el temporizador y mida la diferencia cuando el temporizador se detuvo / pausó. Use setInterval solo para actualizar el valor mostrado.

var output = $(''h1'');
var isPaused = false;
var time = new Date();
var offset = 0;
var t = window.setInterval(function() {
  if(!isPaused) {
    var milisec = offset + (new Date()).getTime() - time.getTime();
    output.text(parseInt(milisec / 1000) + "s " + (milisec % 1000));
  }
}, 10);

//with jquery
$(''.toggle'').on(''click'', function(e) {
  e.preventDefault();
  isPaused = !isPaused;
  if (isPaused) {
    offset += (new Date()).getTime() - time.getTime();
  } else {
    time = new Date();
  }

});

h1 {
    font-family: Helvetica, Verdana, sans-serif;
    font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Seconds: 0</h1>
<button class="toggle">Toggle</button>

Answer 3

No debes medir el tiempo en función de intervalo. En su lugar, simplemente ahorre tiempo cuando se inició el temporizador y mida la diferencia cuando el temporizador se detuvo / pausó. Use setInterval solo para actualizar el valor mostrado. Por lo tanto, no es necesario pausar el temporizador y obtendrá la mejor precisión posible de esta manera.

Answer 4

Puedes usar una bandera para realizar un seguimiento del estado:

var output = $(''h1'');
var isPaused = false;
var time = 0;
var t = window.setInterval(function() {
  if(!isPaused) {
    time++;
    output.text("Seconds: " + time);
  }
}, 1000);

//with jquery
$(''.pause'').on(''click'', function(e) {
  e.preventDefault();
  isPaused = true;
});

$(''.play'').on(''click'', function(e) {
  e.preventDefault();
  isPaused = false;
});

h1 {
    font-family: Helvetica, Verdana, sans-serif;
    font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Seconds: 0</h1>
<button class="play">Play</button>
<button class="pause">Pause</button>

Esto es justo lo que haría, no estoy seguro de si realmente puede pausar setInterval.

Nota: este sistema es fácil y funciona bastante bien para aplicaciones que no requieren un alto nivel de precisión, pero no considerará el tiempo transcurrido entre las marcas: si hace clic en pausa después de medio segundo y luego haga clic en reproducir su tiempo Estará apagado por medio segundo.

Answer 5

Sé que este hilo es viejo, pero esta podría ser otra solución:

var do_this = null;

function y(){
   // what you wanna do
}

do_this = setInterval(y, 1000);

function y_start(){
    do_this = setInterval(y, 1000);
};
function y_stop(){
    do_this = clearInterval(do_this);
};