Question

在点击暂停按钮后，计时器显示为好像停止，但是当我点击恢复时，我发现该计数器在场景后面继续倒计时。我猜setInterval存在问题。请帮我。我的项目CodePen，以供您参考。

我的计时器功能

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);

}

暂停并开始点击活动

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

})

start.addEventListener('click', function() {
  isPaused = false;
})

Answer 1

查看您的代码，我认为问题是您保持相同的then值，这最终是计时器应该结束的时间戳。现在，不要暂停倒计时，而是停止显示更改。

我建议使用你的变量seconds（并使用模数％计算显示），并每秒减少它。这样，暂停显示将有效地暂停减少。

Answer 2

保留当前时间的参考，并在每个刻度处手动添加秒。

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);
}

演示：http://codepen.io/miguelmota/pen/wgMzXY

Answer 3

setInterval返回一个唯一ID，可用于使用clearInterval停止计时器：

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

clearInterval(id) // stop timer

单击暂停按钮后，计时器实际上不会停止

3 个答案: