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

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

javascript countdown timer, interval speeds up after click event

javascript

timer

setinterval

clearinterval