javascript倒数计时器，点击事件后间隔加快

Question

我开始建立一个倒数计时器。 到目前为止，它基本上可以按我的意愿工作。 一个按钮将启动或暂停计时器。 但是，如果我多次启动和暂停它，则间隔将不再保持设置为1000ms。 这使我认为，现在每次单击按钮并行运行多个时间间隔。 我不确定如何解决此问题或问题出在哪里。

function startCountDown() {
  running = !running;
  running ? startButton.value = "Stop Countdown" : startButton.value = "Start Countdown";

  let t = timeDisplay.innerHTML.replace(/:/g, '');
  let seconds = t.slice(-2)
  let minutes = t.slice(-4, -2);
  let hours = t.slice(-6, -4);

  seconds > 60 ? seconds = 59 : seconds;
  minutes > 60 ? minutes = 59 : minutes;

  secondsRemaining = (hours * 3600) + (minutes * 60) + (seconds * 1)

  intervalHandle = setInterval(tick, 1000)
  if (running === false) {
    clearInterval(intervalHandle)
  }
}

function tick() {
  if (running) {
    secondsRemaining--;
    console.log(secondsRemaining)
    hour = Math.floor(secondsRemaining / 3600)
    min = Math.floor((secondsRemaining - (hour * 3600)) / 60);
    sec = Math.floor((secondsRemaining - (hour * 3600) - (min * 60) ));

    timeDisplay.innerHTML = `${hour}:${min}:${sec}`
    if (secondsRemaining === 0 || running === false) {
      clearInterval(intervalHandle)
    }
  }
}

Answer 1

在行中

intervalHandle = setInterval(tick, 1000)
if (running === false) {
  clearInterval(intervalHandle)
}

您每次startCountDown都会启动一个新计时器。 因此，如果以前有一个正在运行的计时器，则可以松开它的ID，因为新计时器的ID存储在intervalHandle 。 然后，如果running flag为false ，则只需停止新创建的计时器，则前一个计时器将永远运行。

换句话说，您每隔第二次调用startCountDown就会泄漏计时器。

您应该将代码重写为类似

if (running === false) {
  clearInterval(intervalHandle);
} else {
  intervalHandle = setInterval(tick, 1000);
}