Javascript / Jquery Pomodoro Clock：時鍾運行時顯示問題

Question

我正在嘗試構建一個簡單的Podomoro Clock，但增量和減量控件存在問題。我希望用戶僅在計時器暫停（停止）時才控制增量/減量顯示，但發生的是計時器即使計時器正在運行或停止，也可以控制顯示。

這是我的代碼：

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

    });
  };



});

我試圖返回狀態為2（計時器正在運行時）的updateDisplay（）函數以將其停止。 但它仍然不起作用。

示例： 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());

    });
  };