Javascript/JQuery Pomodoro Clock: проблема с отображением при работе часов

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

    }); 
    };