El temporizador se muestra como si fuera una especie de parada después de hacer clic en el botón de pausa, pero cuando hago clic en continuar, descubro que el contador continúa la cuenta atrás detrás de la escena. Supongo que hay problemas con setInterval. Por favor, ayúdame. Mi proyecto en CodePen como referencia si lo necesita.

Mi función de temporizador

function timer(seconds) {
  clearInterval(countdown);
  const now = Date.now();
  const then = now + seconds * 1000;
  displayTimerLeft(seconds);
  console.log({
    now,
    then
  });
  countdown = setInterval(() => {
    if (!isPaused) {
      const remainSeconds = Math.round((then - Date.now()) / 1000);
      if (remainSeconds < 0) {
        clearInterval(countdown);
        return;
      }
      displayTimerLeft(remainSeconds);

    }
  }, 1000);

}

Pausar e iniciar eventos de clic

pause.addEventListener('click', function() {
  isPaused = true;
  return;

})

start.addEventListener('click', function() {
  isPaused = false;
})
1
NZMAI 10 ene. 2017 a las 18:52

3 respuestas

La mejor respuesta

Mantenga una referencia de la hora actual y agregue manualmente un segundo en cada marca.

function timer(seconds) {
  clearInterval(countdown);
  const t = new Date();
  const end = t.getTime() + seconds * 1000;
  displayTimerLeft(seconds);
  console.log({
    t,
    end
  });
  countdown = setInterval(() => {
    if (!isPaused) {
      const remainSeconds = Math.round((end - t.getTime()) / 1000);
      if (remainSeconds < 0) {
        clearInterval(countdown);
        return;
      }
      displayTimerLeft(remainSeconds);
      t.setSeconds(t.getSeconds() + 1);
    }
  }, 1000);
}

Demostración: http://codepen.io/miguelmota/pen/wgMzXY

2
Miguel Mota 10 ene. 2017 a las 16:08

setInterval devuelve una identificación única que puede usarse para detener el temporizador usando clearInterval:

var id = setInterval(function(){
console.log('running every 300 ms');
},300);

clearInterval(id) // stop timer
-2
Akram Saouri 10 ene. 2017 a las 15:57

Mirando su código, supongo que el problema es que mantiene el mismo valor then, que en última instancia es una marca de tiempo en la que el temporizador debe finalizar. En este momento, en lugar de pausar la cuenta regresiva, detiene el cambio de la pantalla.

Yo recomendaría usar su variable seconds en su lugar (y calcular la visualización usando el módulo%), y disminuirla cada segundo. De esa manera, pausar la pantalla pausaría efectivamente la disminución.

4
Marc-Antoine Parent 10 ene. 2017 a las 15:59