为什么clearInterval只能工作一次？

Question

我有这个例子:

<p id="test"></p>

<button onClick="clearInterval(myVar)">Stop time!</button>
<button onClick="setInterval(myTimer, 1000)">Start time!</button>

<script>

var myVar = setInterval(myTimer, 1000);

function myTimer() {
    var d = new Date();
    document.getElementById('test').innerHTML = d.toLocaleTimeString();
}

</script>

当我点击"停止时间!" 这是第一次按预期工作,但点击"开始时间!"后 我不能再停止计时器了.为什么会发生这种情况以及如何解决这个问题？

谢谢.

Answer 1

看看这段代码

<button onClick="setInterval(myTimer, 1000)">Start time!</button>

它不起作用,因为您没有将新计时器设置为变量.它不知道应该在那里设置新值.

不是内联代码的粉丝,但这可行

<button onClick="myVar = setInterval(myTimer, 1000)">Start time!</button>

更好的设计是这样的:

(function() {

  var timer;

  function myTimer() {
    var d = new Date();
    document.getElementById('test').innerHTML = d.toLocaleTimeString();
  }

  function startTimer() {
    stopTimer(); //make sure timer is not already running
    timer = setInterval(myTimer, 1000); //start new timer
  }

  function stopTimer() {
    if (timer) clearInterval(timer);
    timer = null;
  }

  document.getElementById("stop").addEventListener("click", stopTimer);
  document.getElementById("start").addEventListener("click", startTimer);

  startTimer();

}());

<p id="test"></p>

<button id="stop">Stop time!</button>
<button id="start">Start time!</button>