时间戳

首页 > 解决方案 > 为什么 clearInterval 不适用于这个时钟？

javascript - 为什么 clearInterval 不适用于这个时钟？

问题描述

我正在尝试创建一个番茄钟，但我无法弄清楚为什么 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)

}

标签： javascriptsetintervalclearinterval

解决方案

问题在于您开始间隔的行：

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

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

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

解决方案可能很简单：只需var从上面两行中删除。您现在只有一个“全局” minutes_intervaland ，调用seconds_interval将引用它。clearInterval一眼看去，这似乎对您来说应该没问题，并且您在取消它们之前只设置了一次这些间隔。但是，如果您想使用此代码同时设置多个间隔，则必须重新考虑您的方法。

推荐阅读