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

Javascript番茄钟 - 当计时器为0时，clearInterval不工作

1 个答案: