Javascript Pomodoro Clock - timerが0のときclearIntervalが機能しない

Question

私は単純なポドモロ時計を作っていますが、タイマーが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);