Reset multiple timers in JS
Question
I try to create a website with multiple timers. I used a script from a website. But in this script is it not possible to reset one timer or both timers. I want to start timer1 again from the beginning, so I have to reset the timer first. How can I reset the timer/s to start it with a new value??
In the end, I want to start Timer1, after that start Timer2 with the remaining time from Timer1 + the new time of Timer2.
function countdown(element, minutes, seconds) { // Fetch the display element var el = document.getElementById(element); // Set the timer var interval = setInterval(function() { if (seconds == 0) { if (minutes == 0) { (el.innerHTML = "STOP!"); clearInterval(interval); return; } else { minutes--; seconds = 60; } } if (minutes > 0) { var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute'); } else { var minute_text = ''; } var second_text = seconds > 1 ? '' : ''; el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ''; seconds--; }, 1000); } //Start as many timers as you want var start1 = document.getElementById('timer1'); var start2 = document.getElementById('timer2'); start1.onclick = function() { countdown('countdown1', 0, 15); } start2.onclick = function() { countdown('countdown2', 0, 10); }
<html> <head> </head> <body> <div id='countdown1'></div> <div id='countdown2'></div> <input id="timer1" type="button" value="Start timer 1" /> <input id="timer2" type="button" value="Start timer 2" /> </body> </html>
Thanks for your help
2 answers
solution1
1 2018-03-01 12:26:08
You need a return and store a reference to your variable that holds the interval ( interval ) you can then call clearinterval on the handle:
The relevant changes are:
//variables to hold the intervals
var countdown1Interval;
var countdown2Interval;
start1.onclick = function() {
countdown1Interval = countdown('countdown1', 0, 15);
}
start2.onclick = function() {
countdown2Interval = countdown('countdown2', 0, 10);
}
//event to reset
resetBoth.onclick = function(){
//null check because the button might not of been pressed
if (countdown1Interval){
clearInterval(countdown1Interval);
countdown1Interval = undefined;
}
if (countdown2Interval){
clearInterval(countdown2Interval);
countdown2Interval = undefined;
}
}
You also need to return the interval handle in countdown ( return interval; )
Full snippet
function countdown(element, minutes, seconds) { // Fetch the display element var el = document.getElementById(element); // Set the timer var interval = setInterval(function() { if (seconds == 0) { if (minutes == 0) { (el.innerHTML = "STOP!"); clearInterval(interval); return; } else { minutes--; seconds = 60; } } if (minutes > 0) { var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute'); } else { var minute_text = ''; } var second_text = seconds > 1 ? '' : ''; el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ''; seconds--; }, 1000); return interval; } //Start as many timers as you want var start1 = document.getElementById('timer1'); var start2 = document.getElementById('timer2'); var resetBoth = document.getElementById('resetBoth'); var countdown1Interval; var countdown2Interval; start1.onclick = function() { countdown1Interval = countdown('countdown1', 0, 15); } start2.onclick = function() { countdown2Interval = countdown('countdown2', 0, 10); } resetBoth.onclick = function(){ if (countdown1Interval){ clearInterval(countdown1Interval); countdown1Interval = undefined; } if (countdown2Interval){ clearInterval(countdown2Interval); countdown2Interval = undefined; } }
<html> <head> </head> <body> <div id='countdown1'></div> <div id='countdown2'></div> <input id="timer1" type="button" value="Start timer 1" /> <input id="timer2" type="button" value="Start timer 2" /> <input id="resetBoth" type="button" value="Stop both timers" /> </body> </html>
solution2
1 ACCPTED 2018-03-01 12:32:28
You can bind the interval as a property to the element itself.
if ( el.interval )
{
clearInterval( el.interval );
}
// Set the timer
var interval = el.interval = setInterval(function() {
Demo
function countdown(element, minutes, seconds) { // Fetch the display element var el = document.getElementById(element); if ( el.interval ) { clearInterval( el.interval ); } // Set the timer var interval = el.interval = setInterval(function() { if (seconds == 0) { if (minutes == 0) { (el.innerHTML = "STOP!"); clearInterval(interval); return; } else { minutes--; seconds = 60; } } if (minutes > 0) { var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute'); } else { var minute_text = ''; } var second_text = seconds > 1 ? '' : ''; el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ''; seconds--; }, 1000); } //Start as many timers as you want var start1 = document.getElementById('timer1'); var start2 = document.getElementById('timer2'); start1.onclick = function() { countdown('countdown1', 0, 15); } start2.onclick = function() { countdown('countdown2', 0, 10); }
<html> <head> </head> <body> <div id='countdown1'></div> <div id='countdown2'></div> <input id="timer1" type="button" value="Start timer 1" /> <input id="timer2" type="button" value="Start timer 2" /> </body> </html>
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.
Related Question
A Way To Reset All Timers
Is it possible to create multiple timers in node.js for multiple independent tasks?
Multiple JS countup timers on one page from specific dates
How to clear JS timers
Multiple Timers with setTimeInterval
Creating multiple controllable timers
Solved - multiple timers
multiple javascript timers on 1 page
Multiple Timers in Quiz with jQuery
Multiple timers in one page
Related Tags