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

【问题标题】：Why won't my countdown timer start and stop?为什么我的倒数计时器不会启动和停止？
【发布时间】：2017-03-31 00:30:58
【问题描述】：

我需要制作一个从 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>

【问题讨论】：

myTimer 仅存在于您的函数内部。你需要让它全球化

标签： javascript counter countdown countdowntimer

【解决方案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>

【讨论】：

【解决方案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 声明移到你的函数之外使它成为全局的。

更好的解决方案

但是将事物放在全局范围内是(mostly) a bad idea。所以.....有一个更好的方法：

   
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>

更好的解决方案使用revealing module pattern 并将timer 保存在私有范围内，Tl;Dr 它可以阻止timer 污染全局范围。

【讨论】：

当你双击启动它们时，所有这些计时器都会出现问题
我认为没有人认为这是一个完整的解决方案。这只是一个关于范围的答案

【解决方案3】：

myTimer 仅在函数范围内。一种解决方案是使其全球化。

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>

【讨论】：

【解决方案4】：

这个解决方案在 React JS 中对我有用

let Timer =(function(){
    let timerObject;
    let callback=null;
    let seconds=0;
    let counter=()=>{
        seconds++;
        console.log("seconds",seconds);
        if (callback!==undefined) callback(seconds);
    }
    let setCallback=(_callback)=>{callback=_callback }
    let getSeconds=()=>{ return seconds;}
    let reset=()=>{ seconds=0;}
    let start=()=>{timerObject=setInterval(counter,1000);}
    let end=()=>{clearInterval(timerObject);}
    return {"start":start,"end":end, "getSeconds":getSeconds, "reset":reset,"setCallback":setCallback}; })();

export default Timer;

【讨论】：