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

我正在制作一个简单的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

最佳答案

您对停止条件的检查不在间隔功能范围内。这就是为什么它永远不会停止的原因。在函数内部移动条件，并使用<=更加安全：

    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);

关于javascript - Javascript Pomodoro Clock-当计时器为0时clearInterval不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37974975/