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

Question

我开始构建一个倒计时器。到目前为止，它基本上按照我想要的方式工作。按钮将启动或暂停计时器。但是，如果我多次启动和暂停它，间隔将不再保持设置为 1000 毫秒。这让我认为它现在在每次单击按钮时并行运行多个间隔。我不确定如何解决这个问题或者问题到底出在哪里。

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 标志为 false，您只需停止新创建的计时器，前一个计时器将永远运行。

换句话说，每隔一秒调用 startCountDown 就会泄漏一个计时器。

您应该将代码重写为类似的内容

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