为什么我的倒数计时器没有开始和停止?

Why won't my countdown timer start and stop?

本文关键字：开始 我的 倒数 计时器 为什么      更新时间：2023-09-26

我需要做一个简单的倒计时定时器从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全局。我还修复了一个小故障，在重置计时器后，它不会显示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>

简单粗暴的回答

   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污染全局作用域。

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>

这个解决方案在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;
相关文章：