javascript - 循环中使用setInterval时出现闪烁和故障

Question

  function startTimer(duration, activity) {
    function countdown() {
      if ((duration - 1) > 0) {
        duration--;
        $("#timer").html(convertNumbers(duration))
      } else {
        if (activity === "session") {
          startBreak();
        } else {
          startSession();
        }
      }    
    }

    setInterval(countdown, 1000) 
}

function startSession() {
    var time = parseInt(($("#session_time").text()), 10);
    startTimer(time * 60, "session");
    $("#activity").html("Session");
}

function startBreak() {
    var time = parseInt(($("#break_time").text()), 10);
    startTimer(time * 60, "break");
    $("#activity").html("Break");
}

开始按钮:

$("#start").click(function() {
  startSession();
});

我正在使用 setInterval 制作一个番茄时钟，它每秒运行一次以减少一秒。当按下开始按钮时，startSession()函数会抓取时间并调用startTimer()函数，当持续时间为0时，该函数指向setBreak()。

理想情况下，它会在 startSession 和 startBreak 之间交替，但在初始倒计时后，我在“#timer”中设置的文本(剩余时间)中出现闪烁和随机数字。这可能与 startTimer() 调用 startBreak() 时未结束 Interval 有关。

Answer 1

您永远不会清除初始间隔，因此当发生中断时，两个间隔会同时运行。

setInterval 返回一个间隔 ID，您可以将其传递给 clearInterval() 以再次停止它。

var timer = setInterval(function () {
    console.log('A second has passed!');
}, 1000});

setTimeout(function () {
    clearInterval(timer);
    console.log('Seconds no longer passes');
}, 10 * 1000);

请参阅 setInterval 的文档和 clearInterval了解更多信息。