javascript - 使函数仅在计时器运行时可点击

Question

我正在尝试学习 JavaScript/jQuery，并尝试创建一个简单的倒计时应用程序。用户可以设置时间量，然后单击显示的值开始倒计时。当倒计时发生时，如果用户再次单击显示的值，我想暂停倒计时(请注意，在我的代码中，我只是使用警报消息，因为我还没有开始编写暂停代码的部分) 。到目前为止，一切似乎都有效。然而，当倒计时结束时，用户应该能够选择新的倒计时时间并再次单击显示屏以开始倒计时。但是，当我单击显示屏时，它会在开始倒计时之前多次运行警报消息。基本上，用户应该能够在计时器运行时单击显示屏来暂停倒计时。如果倒计时未运行，则单击显示屏应该会开始新的倒计时。

这是我的 HTML:

  <div class="value-display">
  <button class="btn" id="increase" onclick="increase()">+</button>
  <h1 id="display" onclick="startTimer()">5</h1>
  <button class="btn" id="decrease" onclick="decrease()">-</button>
  </div>

这是我的 JavaScript:

var total = 5;
var counter;

function increase() {
  total += 1;
  document.getElementById("display").innerHTML = total;
}

function decrease() {
  if (total > 0) {
    total -= 1;
    document.getElementById("display").innerHTML = total;
  }
}

function startTimer() {
  counter = setInterval(timer, 1000);
}

function timer() {
  if (total === 0) {
    document.getElementById("increase").disabled = false;
    document.getElementById("decrease").disabled = false;
    clearInterval(counter);
    return total;
  } else if (total > 0) {
    total -= 1;
    document.getElementById("increase").disabled = true;
    document.getElementById("decrease").disabled = true;
    document.getElementById("display").innerHTML = total;

    $("#display").click(function() {
      alert("ok");
    })
  }
}

这是代码笔:

http://codepen.io/jv1149/pen/PzqKqQ/

Answer 1

我将创建一个新变量state来保存计时器的当前状态。例如:0 = 停止，1 = 暂停，2 = 运行。
然后，您可以将 startTimer() 方法更改为 changeState()，它会检查计时器的当前状态，然后执行适当的功能。例如: (if state === 2) {pauseTimer(); }
从那里我认为您可以完成代码修改以实现 startTimer()、pauseTimer() 和 stopTimer() 函数。