Javascript Pomodoro Clock - 当计时器为 0 时，clearInterval 不起作用

Question

我正在制作一个简单的 podomoro 时钟，一切似乎都工作正常，除了当计时器达到 0 时它并没有完全停止。分钟似乎停止了，但秒却不断减少。我认为我的 startTimer 函数可能有问题，但我已经尝试修改它几个小时但没有结果。

JS:

  $(document).ready(function() {
  var pomoTime = $('#pomodoroNum');
  var breakTime = $('#breakNum');
  var status = $('#timerStatus');
  var timerDisplay = $('#timer');
  var startButton = $('#startBtn');
  var stopButton = $('#stopBtn');
  var state = 1; // 1=stopped 2=running
  var countDown; // intervalID;
  var minutes = 0;
  var seconds = 60;

  startButton.click(function() {
    if (state == 1) { // if timer is not running then start timer
      startTimer(minutes, seconds);
      $('#breakMinus').off("click");
      $('#breakPlus').off("click");
      $('#workMinus').off("click");
      $('#workPlus').off("click"); // disable +- controls when timer starts

    };
  });

  updateDisplay(); // initially controls are enabled at the start

  stopButton.on("click", function() {
    if (state == 2) {
      pauseTimer();
      state = 1;
      updateDisplay(); // renable +- controls when timer stops

    }
  });

  function startTimer(m, s) {
    state = 2;
    var startMinutes = m;
    var startSeconds = s;

    countDown = setInterval(function() {

      startSeconds--;
      startMinutes = ("0" + startMinutes).slice(-2); // double digits conversion if <10
      startSeconds = ("0" + startSeconds).slice(-2);

      minutes = ("0" + startMinutes).slice(-2); // update minutes and seconds so when timer is stopped, it can resume from where it left off when startButton is pressed.
      seconds = ("0" + startSeconds).slice(-2);

      timerDisplay.html(startMinutes + ":" + startSeconds);

      if (startSeconds == 0 && startMinutes > 0) {
        startMinutes-- // decerement minutes when seconds 0...
        startSeconds = 60; // ..and reset seconds to 60
      }
    }, 1000);

    if (startMinutes == 0 && startSeconds == 0) {
      clearInterval(countDown);// <-- not clearing here
    }
  };

  function pauseTimer() {

    clearInterval(countDown);
  };

  function updateDisplay() {
    // break +-
    $('#breakMinus').on("click", function() {
      status.html("Break");
      if (breakTime.text() > 1) {
        breakTime.text(+breakTime.text() - 1);
      };
      timerDisplay.text(breakTime.text());
    });

    $('#breakPlus').on("click", function() {
      status.html("Break");
      breakTime.text(+breakTime.text() + 1); // parseInt to covert string into number so it doesn't concatanate.
      timerDisplay.text(breakTime.text());
    });

    // work +-
    $('#workMinus').on("click", function() {
      status.html("Work");
      if (pomoTime.text() > 1) {
        minutes = pomoTime.text() - 2;
      }
      seconds = 60;
      if (pomoTime.text() > 1) {
        pomoTime.text(+pomoTime.text() - 1);
      };
      timerDisplay.text(pomoTime.text());
    });

    $('#workPlus').on("click", function() {
      minutes = pomoTime.text();
      seconds = 60;
      status.html("Work");
      pomoTime.text(+pomoTime.text() + 1); // parseInt to covert string into number to prevent concatanation.

      timerDisplay.html(pomoTime.html());

    });
  };

});

示例:http://codepen.io/aliz16/pen/OXMwRJ

Answer 1

您对停止条件的检查在间隔函数之外。这就是为什么它永远不会停止。将条件移至函数内并使用 <=为了更加安全:

    if (startSeconds <= 0 && startMinutes > 0) {
        startMinutes -= 1; // decerement minutes when seconds 0...
        startSeconds += 60; // ..and reset seconds to 60
    }

    if (startMinutes <= 0 && startSeconds <= 0) {
        clearInterval(countDown);
    }

}, 1000);