仅在计时器运行时使功能可点击

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() 函数。

Answer 2

大部分部件都在工作！但是您的代码无法正常工作，因为...

1) 您的 click 函数包含在您的 display 函数中，因此每次调用 timer() 函数时，它都会附加另一个事件侦听器。

2) 此外，您的 js 文件中同时包含内联事件侦听器和侦听器——它们相互竞争。将您的事件侦听器保持在同一范围内。

这是工作代码：http://codepen.io/anon/pen/NrqarP

HTML：

<div class="value-display">
  <button class="btn" id="increase">+</button>
  <h1 id="display" onclick="startTimer()">5</h1>
  <button class="btn" id="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 stopTimer() {
  clearInterval(counter);
}

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;


  }
}

/* see how I played the event listeners both 1) outside of the timer() function and 2) away from your HTML */

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

$("#increase").on("click", function() {
  increase();
})

$("#decrease").on("click", function() {
  decrease();
})

供日后参考，请阅读：https://philipwalton.com/articles/decoupling-html-css-and-javascript/

Answer 3

当总数达到零时，您也需要 clearInterval()。

我也不会在定时器函数中定义 display.click 函数

您可能还希望将显示保存在 var 中，以便不必每次都搜索它

var total = 5;
var counter;
var increase = document.getElementById("increase");
var decrease = document.getElementById("decrease");
var display = document.getElementById("display");

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

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

function startTimer() {
  increase.disabled = true;
  decrease.disabled = true;
  counter = setInterval(timer, 1000);
}

function pauseTimer() {
 increase.disabled = false;
 decrease.disabled = false;
 clearInterval(counter);
}

$("#display").click(function() {
  if(total===0) startTimer();
  else pauseTimer();
})

function timer() {
  if (total === 0) {
    pauseTimer();
    return total;
  } else if (total > 0) {
    total -= 1;
    display.innerHTML = total;
  }
}