为什么clearInterval对此时钟不起作用

Question

我正在尝试创建一个pomodoro时钟，但我不明白为什么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函数内创建了一个新的局部变量。它对同名的外部(全局？(变量没有任何作用，因为它们是"全局"变量；阴影的"；通过新的局部变量。

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

解决方案可能非常简单：只需从上面两行中删除var即可。你现在只有一个"；全局"；minutes_interval和seconds_interval，它们将被clearInterval调用引用。快速浏览一下，这似乎对你来说还可以，而且在取消这些间隔之前，你只设置过一次。但是，如果您想使用此代码同时设置多个间隔，则必须重新考虑您的方法。