Javascript/Jquery Pomodoro時鐘：顯示時鐘運行時的問題

Question

我正在嘗試構建一個簡單的Podomoro時鐘，我遇到了增量和減量控制問題。我想讓用戶只控制增量/減量顯示當定時器暫停（停止）時，但是即使定時器正在運行或停止，也可以控制定時器顯示。

這裏是我的代碼：

HTML

<div class="container text-center"> 
<div class="row text-center"> 
    <div class="col-xs-12"> 
     <h1>FreeCodeCamp Podomoro</h1> 
    </div> 
    </div> 
    <div class="row intervalContainer text-center"> 
    <div class="col-xs-12" id="break"> 
     <h3>Break Time</h3> <br /> 
     <button class="btn btn-danger" id="breakMinus">-</button> 
     <div id="breakNum">5</div> 
     <button class="btn btn-success" id="breakPlus">+</button> 
    </div> 
    <div class="col-xs-12" id="Setpomodoro"> 
     <h3>Pomodoro Time</h3> <br /> 
     <button class="btn btn-danger" id="workMinus">-</button> 
     <div id="pomodoroNum">25</div> 
     <button class="btn btn-success" id="workPlus">+</button> 
    </div> 
    </div> 
    <div class="row timerContainer text-center"> 
    <div class="col-xs-12"> 
     <h2 id="timerStatus">Work</h2> 
     <span id="timer">26</span> 
    </div> 
    </div> 
    <div class="row start_stop"> 
    <div class="col-xs-12 text-center" id="buttonContainer"> 
     <button class="btn btn-success" id="startBtn">Start</button> 
     <button class="btn btn-danger" id="stopBtn">Stop</button> 
    </div> 
    </div> 

</div> 

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 pomoVal = 24; 
    var breakVal = 4; 
    var countDown; 

    startButton.click(function() { 
    if (state == 1) { // if timer is not running then start timer 
     state = 2; 
     startTimer(pomoVal); 

    }; 
    }); 

    stopButton.on("click", function() { 
    if (state == 2) { 
     pauseTimer(); 
     state = 1; 
    } 
    }); 

    updateDisplay(); 

    function startTimer(time) { 

    var minutes = time; 
    var seconds = 60; 

    countDown = setInterval(function() { 

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

     timerDisplay.html(minutes + ":" + seconds); 

     if (seconds == 0) { 
     minutes-- // decerement minutes when seconds 0... 
     seconds = 60; // ..and reset seconds to 60 
     } 

     if (minutes < 0) { 
     clearInterval(countdown); 
     } 

    }, 1000); 

    }; 

    function pauseTimer() { 

    clearInterval(countDown); 
    }; 


    function updateDisplay() { 
    if (status == 2) { 
     return false; 
    } 
    $('#breakMinus').on("click", function() { 
     status.html("Break"); 
     if (breakTime.html() > 1) { 
     breakTime.html(parseInt(breakTime.html()) - 1); 
     }; 
     timerDisplay.html(breakTime.html()); 
    }); 

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

    // work minus and plus 
    $('#workMinus').on("click", function() { 
     status.html("Work"); 
     if (pomoTime.html() > 1) { 
     pomoTime.html(parseInt(pomoTime.html()) - 1); 
     }; 
     timerDisplay.html(pomoTime.html()); 
    }); 

    $('#workPlus').on("click", function() { 

     status.html("Work"); 
     pomoTime.html(parseInt(pomoTime.html()) + 1); // parseInt to covert string into number to prevent concatanation. 
     timerDisplay.html(pomoTime.html()); 

    }); 
    }; 



}); 

我試圖返回函數updateDisplay（）停止它的時候狀態2（當定時器運行時）。但它仍然不起作用。

例如：http://codepen.io/aliz16/pen/OXMwRJ?editors=1010

Answer 1

您需要檢查狀態變量在您的控制事件處理程序：

function updateDisplay() { 
    /* 
     Not Needed 
     if (status == 2) { 
     return false; 
     } 
    */ 
    $('#breakMinus').on("click", function() { 
     // Check status here 
     if (status == 2) { 
     return false; 
     } 
     status.html("Break"); 
     if (breakTime.html() > 1) { 
     breakTime.html(parseInt(breakTime.html()) - 1); 
     }; 
     timerDisplay.html(breakTime.html()); 
    }); 

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

    // work minus and plus 
    $('#workMinus').on("click", function() { 
     // Check status here 
     if (status == 2) { 
     return false; 
     } 
     status.html("Work"); 
     if (pomoTime.html() > 1) { 
     pomoTime.html(parseInt(pomoTime.html()) - 1); 
     }; 
     timerDisplay.html(pomoTime.html()); 
    }); 

    $('#workPlus').on("click", function() { 

     // Check status here 
     if (status == 2) { 
     return false; 
     } 
     status.html("Work"); 
    pomoTime.html(parseInt(pomoTime.html()) + 1); // parseInt to covert string into number to prevent concatanation. 
     timerDisplay.html(pomoTime.html()); 

    }); 
    };