javascript countdown timer with start & stop buttons

前端 未结 4 705
孤城傲影
孤城傲影 2021-01-06 02:29

I need to make a simple countdown timer from 5 to zero, with the buttons to START and STOP the counter. The only thing that I don\'t know is that why won\'t my counter stop.

相关标签:
4条回答
  • 2021-01-06 02:46

    Here you go, you just needed to make myTimer global. I also fixed a glitch where after resetting the timer, it won't show 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>

    0 讨论(0)
  • 2021-01-06 02:48

    myTimer is only in scope within the function. One solution is to make it global.

    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>

    0 讨论(0)
  • 2021-01-06 02:53

    This solution worked for me in 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;
    
    0 讨论(0)
  • 2021-01-06 03:05

    Quick and dirty answer

       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 in your function (because its declared, var, inside your function) can only be accessed inside your function. Moving the var declaration outside your function makes it global.

    Better solution

    But putting things in the global scope is (mostly) a bad idea. So.....there's a better way:

       
    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>

    the better solution utilises a revealing module pattern and will hold the timer inside a private scope, Tl;Dr it stops the timer polluting the global scope.

    0 讨论(0)
提交回复
热议问题