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.
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>
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>
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;
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.
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.