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倒计时器，点击事件后间隔加快

1 个答案: