Javascript : setInterval Timer when stop using clearInterval can't restart it again
Question
I'm working on Timer of hrs seconds minutes. I use setInterval for start it. but when click on button to restart the timer it doesn't work again. The button suppose to clear the timer ( clearInterval ), then restart it again.
I Tried calling the function which contains the timer after clearInterval but timer still doesn't work.
Timer Code
function gameTimer(intervalTime){
var input = {
hours: 0,
minutes: 0,
seconds: 0
};
var timestamp = new Date(input.hours, input.minutes, input.seconds);
var interval = intervalTime;
setInterval(function () {
timestamp = new Date(timestamp.getTime() + interval * 1000);
document.querySelector('.countdown2').innerHTML = timestamp.getHours() + 'h:'
+ timestamp.getMinutes() + 'm:' + timestamp.getSeconds() + 's';
}, Math.abs(interval) * 1000);
}
gameTimer(1);
reset function
function resetFunc(){
clearInterval(gameTimer(0))
}
let reset = document.getElementById('restart');
reset.addEventListener('click', resetFunc);
after this function i call the timer function again to restart the timer again but it's not working
gameTimer(1);
2 answers
solution1
2 ACCPTED 2019-06-02 14:47:32
The problem
You are not return ing from gameTimer function. In order to subscribe to setInterval , you need to get the value from it. So the code would go:
function gameTimer(intervalTime){
var input = {
hours: 0,
minutes: 0,
seconds: 0
};
var timestamp = new Date(input.hours, input.minutes, input.seconds);
var interval = intervalTime;
// here!!
return setInterval(function () {
timestamp = new Date(timestamp.getTime() + interval * 1000);
document.querySelector('.countdown2').innerHTML = timestamp.getHours() + 'h:'
+ timestamp.getMinutes() + 'm:' + timestamp.getSeconds() + 's';
}, Math.abs(interval) * 1000);
}
And your resetFunc has a problem too:
function resetFunc(){
clearInterval(gameTimer(0))
}
this would start the timer, but at the same time clear the interval returned from gameTimer . So in essence it would do just nothing.
The answer
So a complete answer would go like this:
<html>
<head>
<script>
window.onload = function(){
let isTimerRunning = false
let intervalRef
function gameTimer(intervalTime){
var input = {
hours: 0,
minutes: 0,
seconds: 0
};
var timestamp = new Date(input.hours, input.minutes, input.seconds);
var interval = intervalTime;
// here!!
return setInterval(function () {
console.log('hey')
}, Math.abs(interval) * 1000);
}
function toggleTimer(interval){
if (isTimerRunning){
isTimerRunning = false
clearInterval(intervalRef)
}
else{
isTimerRunning = true
intervalRef = gameTimer(interval)
}
}
let reset = document.getElementById('restart');
reset.addEventListener('click', function(){toggleTimer(1)});
}
</script>
</head>
<body>
<button id = 'restart'>
toggle
</button>
</body>
</html>
Note that I have simplified the logic in your callback for setInterval .
solution2
0 2019-06-03 03:57:40
var interval, intervalTime2 = 1; function gameTimer(intervalTime){ if (interval){ clearInterval(interval); }; intervalTime2 = intervalTime; var input = { hours: 0, minutes: 0, seconds: 0 }; var timestamp = new Date(input.hours, input.minutes, input.seconds); interval = setInterval(function () { timestamp = new Date(timestamp.getTime() + intervalTime * 1000); document.querySelector('.countdown2').innerHTML = timestamp.getHours() + 'h:' + timestamp.getMinutes() + 'm:' + timestamp.getSeconds() + 's'; }, Math.abs(intervalTime) * 1000); } gameTimer(1); function resetFunc(){ gameTimer(intervalTime2); } let reset = document.getElementById('restart'); reset.addEventListener('click', resetFunc);
<span class="countdown2"></span> <button id="restart">Restart</button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.