为什么我的倒数计时器不启动和停止？

Question

我需要制作一个简单的从 5 到 0 的倒数计时器，并带有启动和停止计数器的按钮。我唯一不知道的是为什么我的柜台不会停止。

代码如下：

    function clock() {
     var myTimer = setInterval(myClock, 1000);
     var c = 5;

     function myClock() {
       document.getElementById("demo").innerHTML = --c;
       if (c == 0) {
         clearInterval(myTimer);
         alert("Reached zero");
       }
     }
   }

 <p id="demo">5</p>
<button onclick="clock()">Start counter</button>
<button onclick="clearInterval(myTimer)">Stop counter</button>

原文由 Tommi Tiihonen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

给你，你只需要使 myTimer 全局。我还修复了一个故障，在重置计时器后，它不会显示 5。

 var myTimer;
   function clock() {
     myTimer = setInterval(myClock, 1000);
     var c = 5;

     function myClock() {
       document.getElementById("demo").innerHTML = --c;
       if (c == 0) {
         clearInterval(myTimer);
         alert("Reached zero");
       }
     }
   }

 <p id="demo">5</p>
<button onclick="clock(); document.getElementById('demo').innerHTML='5';">Start counter</button>
<button onclick="clearInterval(myTimer);">Stop counter</button>

原文由 Feathercrown 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

快速而肮脏的答案

    var myTimer;
   function clock() {
     myTimer = setInterval(myClock, 1000);
     var c = 5;

     function myClock() {
       document.getElementById("demo").innerHTML = --c;
       if (c == 0) {
         clearInterval(myTimer);
         alert("Reached zero");
       }
     }
   }

 <p id="demo">5</p>
<button onclick="clock()">Start counter</button>
<button onclick="clearInterval(myTimer)">Stop counter</button>

timer 在你的函数中（因为它的声明， var ，在你的函数内部）只能在你的函数内部访问。将 var 声明移到函数之外使其成为全局函数。

更好的解决方案

但是将事物放在全局范围内 （大部分）是一个坏主意。所以…..有一个更好的方法：

var myTimerObj = (function(document){

   var myTimer;

   function start() {
     myTimer = setInterval(myClock, 1000);
     var c = 5;

     function myClock() {
       document.getElementById("demo").innerHTML = --c;
       if (c == 0) {
         clearInterval(myTimer);
         alert("Reached zero");
       }
     }
   }

   function end() {
       clearInterval(myTimer)
   }

   return {start:start, end:end};
 })(document);

 <p id="demo">5</p>
<button onclick="myTimerObj.start()">Start counter</button>
<button onclick="myTimerObj.end()">Stop counter</button>

更好的解决方案利用 揭示模块模式 并将 timer 保存在私有范围内， Tl;Dr 它停止了 timer 污染全局范围。

原文由 Liam 发布，翻译遵循 CC BY-SA 3.0 许可协议