为什么 clearInterval 不适用于此时钟？

Question

我正在尝试创建一个番茄钟，但我不明白为什么 resetClock 函数除了清除时钟的间隔外什么都做。它正在重置数字，但时钟一直在倒计时。我想我在尝试实现停止时钟功能时也会遇到这个问题。有人可以帮忙吗？

var minutes = 25;
var seconds = 0;
var startSound = new Audio('./sounds/startsound.mp3')
var resetSound = new Audio('./sounds/resetclocksound.mp3')
var stopSound = new Audio('./sounds/pausesound.mp3')
var alarmSound = new Audio('/sounds//haoduken.mp3')
var minutes_interval;
var seconds_interval;


function startClock() {
  startSound.play();
  minutes = 24;
  seconds = 59;
  document.getElementById('minutes').innerHTML = minutes;
  document.getElementById('seconds').innerHTML = seconds;
  document.getElementById('start-button').removeEventListener('click', startClock)
  var minutes_interval = setInterval(minutesTimer, 60000);
  var seconds_interval = setInterval(secondsTimer, 1000);

  function minutesTimer() {
    minutes = minutes - 1;
    document.getElementById('minutes').innerHTML = minutes;
  }

  function secondsTimer() {
    seconds = seconds - 1;
    document.getElementById('seconds').innerHTML = seconds;
    if (seconds <= 0) {
      seconds = 60;
    }
    if (seconds <= 0 && minutes <= 0) {
      alarmSound.play()
      clearInterval(minutes_interval);
      clearInterval(seconds_interval);
    }
  }
}

function resetClock() {
  clearInterval(seconds_interval);
  clearInterval(minutes_interval)
  resetSound.play();
  var minutes = 25;
  var seconds = 0;
  document.getElementById('minutes').innerHTML = minutes;
  document.getElementById('seconds').innerHTML = seconds;
  document.getElementById('start-button').addEventListener('click', startClock)

}

Answer 1

问题出在您开始间隔的行上：

   var minutes_interval = setInterval(minutesTimer, 60000);
   var seconds_interval = setInterval(secondsTimer, 1000);

问题只是您使用了 var 关键字，它在 startClock 函数中创建了一个新的 local 变量。它对同名的外部（全局？）变量没有任何作用，因为它们被新的局部变量“遮蔽”了。

因此，resetClock 内部的 clearInterval 调用引用了不包含计时器 ID 的外部变量。

解决方法可能很简单：将上面两行的var去掉即可。您现在只有一个“全局”minutes_interval 和 seconds_interval，它们将被 clearInterval 调用引用。快速浏览一下，这似乎对您来说应该没问题，而且您在取消它们之前只设置一次这些间隔。但是，如果您想使用此代码同时设置多个间隔，则必须重新考虑您的方法。

为什么 clearInterval 不适用于此时钟？

Why is clearInterval not working for this clock?

javascript

setinterval

clearinterval