<script>
var minutes = 1;
var seconds = 45;
$(document).ready(function () {
setInterval(startTimer, 1000);
});
function startTimer() {
document.getElementById("timer").innerHTML = (minutes - 1) + ":" + --seconds;
if (seconds == 0) {
minutes--;
if (minutes != 0) {
seconds = 60;
} else {
seconds = 0;
}
}
if (minutes == 0 && seconds == 0) {
document.getElementById('next').click();
minutes = 1;
seconds = 45;
}
}
</script>
This is my code for the timer and it should restart after button click whose id is #next. I did many things but it won't work. Please help.
Button Id = Next
Here's my solution to your issue.
I've noticed $(document).ready() so I instantly presumed you are
using jQuery.
var timerInterval is a direct reference to the timer that you started.
To stop the timer, use clearInterval(timerInterval) [Same story goes for setTimeout()].
I've changed your countdown timer because I couldn't be bothered fixing it.
var timerInterval;
let minutes = 2;
let seconds = 42;
let duration = (minutes * 60) + seconds;
let display = document.querySelector('#timer');
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
timerInterval = setInterval(function() {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
clearInterval(timerInterval);
}
}, 1000);
}
startTimer(duration, display);
$('button').click((e) => {
clearInterval(timerInterval);
startTimer(duration, display);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="timer"></span>
<br>
<button>Reset Timer</button>
You should not rely on setInterval (or setTimeout) to calculate a time value. It is not guaranted to be called at the specified interval. I believe in some case it could also be paused by the browser.
You could try something like this :
<span id='timer'></span>
<button id='next'>Next</button>
<script>
var btn = document.getElementById('next');
btn.addEventListener('click', function(e) {
// 10 is the duration in seconds
startNextTimer(10, function() { alert('done!');} );
});
function startNextTimer(numSecondsDuration, callback) {
var label = document.getElementById('timer');
var endDate = new Date();
endDate.setSeconds(endDate.getSeconds() + numSecondsDuration);
var calcTimeLeft = function() { return Math.ceil((endDate - (new Date())) / 1000); };
label.innerHTML = calcTimeLeft() + " secs";
var intervalId = setInterval(function() {
var numSecondsLeft = calcTimeLeft();
if (numSecondsLeft <= 0) {
clearInterval(intervalId);
if (callback) {
callback();
}
}
label.innerHTML = numSecondsLeft + " secs";
}, 500);
}
</script>
Without the html I can't give you step by step but basically, you need to clear the interval before you can restart it.
<script>
var minutes = 1;
var seconds = 45;
var interval_id=setInterval(startTimer, 1000);
$('#next').on("click",function(){
clearInterval(interval_id);
minutes = 1;
seconds = 45;
document.getElementById("timer").innerHTML ="";
interval_id=setInterval(startTimer, 1000);
});
function startTimer() {
document.getElementById("timer").innerHTML = (minutes - 1) + ":" + --seconds;
if (seconds == 0) {
minutes--;
if (minutes != 0) {
seconds = 60;
} else {
seconds = 0;
}
}
if (minutes == 0 && seconds == 0) {
minutes = 1;
seconds = 45;
}
}
</script>
I want the breakCount function to start counting when the previous session times out, it only updates the variable $breakData but doesn't countdown, why? how can I make it work? If this snippet doesn't help you understand what I mean please say so.
function holdCount() {
var t,
secs = 60,
mins = countSession.innerHTML;
mins--;
function countdown() {
secs--;
if (secs < 0) {
mins--;
secs = 59;
};
if (secs < 10) {
countSession.innerHTML = mins + ':' + '0' + secs;
} else {
countSession.innerHTML = mins + ':' + secs;
};
t = setTimeout(countdown, 1000);
if (mins == 0 && secs == 0) {
clearTimeout(t);
breakCount();
function breakCount() {
var $breakData = $('#displayBreak').text();
$breakData--;
$('#sessionCount').text($breakData);
}
setTimeout(breakCount, 1000);
}
}
countdown();
}
countSession.addEventListener('click', holdCount, false);
I'm creating java script count down timer and it works up to 60 seconds correctly and after that its not working.
var counter = setInterval(timer, 1000); //1000 will run it every 1 second
function timer() {
var val = document.getElementById("LabelTimer");
if (val != null) {
var PopUpTimeDuration = 2;
countdown(parseInt(PopUpTimeDuration));
}
}
function countdown(minutes) {
var seconds = 60;
var mins = minutes
function tick() {
var counterVal = document.getElementById("lblCountDown");
var current_minutes = mins - 1
seconds--;
counterVal.innerHTML =
current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
var result = counterVal.innerHTML;
if (result == "0:00") {
clearInterval(counter);
CloseIdlePage();
}
if (seconds > 0) {
setTimeout(tick, 1000);
} else {
debugger;
if (mins >= 1) {
countdown(mins - 1);
}
}
}
tick();
}
When i run this program this start 1:59 and it continues up to 1:01. after that this display value rest to 1:59. (not 0:59). what i did wrong in here?
Fiddle demo is in Here: in here you can see two values are blinking each other
Here's how I'd implement this. Hopefully the comments are sufficient. It needs an element in the page with ID "counterDiv" to write the values to.
function quickCount(mins) {
// Keep some values in a closure
var el = document.getElementById('counterDiv');
var secs = 0;
// Helper to pad single digit numbers
function z(n){return (n<10? '0':'') + n}
// Keep a reference to the interval
var timer = setInterval(function() {
// Write the values
el.innerHTML = mins + ':' + z(secs);
// Decremement seconds
--secs;
// If finished a minute, decrement minut
if (secs < 0) {
if (mins) {
--mins;
secs = 59;
// If finsihed minutes too, cancel timer
} else {
timer && clearInterval(timer);
}
}
// Run at about every second
}, 1000);
}
window.onload = function() {
quickCount(2);
}
HTH
<head>
<script type="text/javascript">
function timer()
{
var val = document.getElementById("LabelTimer");
if (val !== null)
{
var PopUpTimeDuration = 2;
countdown(parseInt(PopUpTimeDuration));
}
}
function countdown(minutes)
{
var seconds = 60;
var mins = minutes;
function tick()
{
var counterVal = document.getElementById("lblCountDown");
var current_minutes = mins - 1;
seconds--;
var t=current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
counterVal.value = t;
var result = counterVal.innerHTML;
if (result === "0:00")
{
CloseIdlePage();
}
if (seconds > 0)
{
setTimeout(tick, 1000);
}
else
{
if (mins > 1)
{
countdown(mins - 1);
}
}
}
tick();
}
</script>
</head>
<body>
<div>TODO write content</div>
<input type="text" id="LabelTimer" value="yooo">
<input type="text" id="lblCountDown">
<input type="button" value="try" onclick="timer();" />
</body>
I resolved this as follows:
var counter = setInterval(timer, 1000); //1000 will run it every 1 second
var IsFunctionCalled = false;
function timer() {
var val = document.getElementById("LabelTimer");
if (val != null) {
var PopUpTimeDuration = 2;
if (IsFunctionCalled == false) {
IsFunctionCalled = true
countdown(parseInt(PopUpTimeDuration));
}
}
}
function countdown(minutes) {
var seconds = 60;
var mins = minutes
function tick() {
var counterVal = document.getElementById("lblCountDown");
var current_minutes = mins - 1
seconds--;
counterVal.innerHTML =
current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
var result = counterVal.innerHTML;
if (result == "0:00") {
clearInterval(counter);
CloseIdlePage();
}
if (seconds > 0) {
setTimeout(tick, 1000);
// tick()
} else {
if (mins >= 1) {
countdown(mins - 1);
}
}
}
tick();
}
See here for Demo
I have a question: When I do a countdown in JavaScript, and I have a function of the form:
<script>
var interval;
var minutes = 1;
var seconds = 5;
window.onload = function() {
countdown('countdown');
}
function countdown(element) {
interval = setInterval(function() {
var el = document.getElementById(element);
if(seconds == 0) {
if(minutes == 0) {
el.innerHTML = "countdown's over!";
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 ? 'seconds' : 'second';
el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
seconds--;
}, 1000);
}
</script>
The time between each one performance of the function is exactly 1 sec. or there is some delay caused by time due to perform body of function?
No, setTimeout() and setInterval() have impredictable accuracy, as said in this other question you can get better precision by setting a timeout once and than using (new Date()).milliseconds to do time related actions instead of using setTimeout() for every thing
There are functions setTimeout(fnc, delay) and setTimeout(fnc, delay) that are said to call fnc after at least delay ms. See MDN for details.
in a related question I have posted this code. It almost works, but the counter doesn't.
Can we fix it? (no jQuery, please)
<script type="text/javascript">
var intervals = [];
var counters = {
"shoes":{"id":"shoe1","minutes":1,"seconds":5},
"trousers":{"id":"trouser1","minutes":10,"seconds":0}
}; // generate this on the server and note there is no comma after the last item
window.onload = function() {
for (var el in counters) { countdown(counters[el]) };
}
function countdown(element) {
intervals[element.id] = setInterval(function() {
var el = document.getElementById(element.id);
var minutes = element.minutes;
var seconds = element.seconds;
if(seconds == 0) {
if(minutes == 0) {
el.innerHTML = "countdown's over!";
clearInterval(intervals[element.id]);
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 ? 'seconds' : 'second';
el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
seconds--;
}, 1000);
}
</script>
shoes: <span id="shoe1"></span><br />
trousers: <span id="trouser1"></span><br />
You just need to take the minutes and seconds variable declarations out of the inner function, like this:
function countdown(element) {
var minutes = element.minutes;
var seconds = element.seconds;
intervals[element.id] = setInterval(function() {
var el = document.getElementById(element.id);
if(seconds == 0) {
if(minutes == 0) {
el.innerHTML = "countdown's over!";
clearInterval(intervals[element.id]);
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 ? 'seconds' : 'second';
el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
seconds--;
}, 1000);
}
When you call countdown, you want to fetch the initial values for each countdown and then slowly decrease them (closure makes sure that the values will stay available as long as the anonymous function requires them). What you were doing before was reset the countdown values at the start of each tick, so the countdown never had a chance to... well, count down.
Update:
If you need to update the values inside window.counters while the countdowns are active (although I don't see why you would want to do that; if you want to do anything meaningful with the "current" countdown values, just do it inside the anonymous function), you can simply add this at the end:
var second_text = seconds > 1 ? 'seconds' : 'second';
el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
seconds--;
// ADD THIS:
element.minutes = minutes;
element.seconds = seconds;
Please check this
<html>
<body>
<script type="text/javascript">
var intervals = [];
var counters = {
"shoes":{"id":"shoe1","minutes":1,"seconds":5},
"trousers":{"id":"trouser1","minutes":10,"seconds":0}
}; // generate this on the server and note there is no comma after the last item
window.onload = function() {
for (var el in counters) { countdown(counters[el]) };
}
function countdown(element) {
intervals[element.id] = setInterval(function() {
var el = document.getElementById(element.id);
var minutes = element.minutes;
var seconds = element.seconds;
if(seconds == 0) {
if(minutes == 0) {
el.innerHTML = "countdown's over!";
clearInterval(intervals[element.id]);
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 ? 'seconds' : 'second';
el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
seconds--;
element.seconds = seconds;
element.minutes = minutes;
}, 1000);
}
</script>
shoes: <span id="shoe1"></span><br />
trousers: <span id="trouser1"></span><br />
</body>
</html>
Working solution is here.
EDIT: There was a minor issue with the script. I've fixed it.
After recalculating the seconds and minutes you have to set the new values back in the element object.
You're decrementing the wrong variable inside your interval callback. Instead of doing seconds-- and minutes-- you need to reference the element members.
intervals[element.id] = setInterval(function() {
var el = document.getElementById(element.id);
if(element.seconds == 0) {
if(element.minutes == 0) {
el.innerHTML = "countdown's over!";
clearInterval(intervals[element.id]);
return;
} else {
element.minutes--;
element.seconds = 60;
}
}
if(element.minutes > 0) {
var minute_text = element.minutes + (element.minutes > 1 ? ' minutes' : ' minute');
} else {
var minute_text = '';
}
var second_text = element.seconds > 1 ? 'seconds' : 'second';
el.innerHTML = minute_text + ' ' + element.seconds + ' ' + second_text + ' remaining';
element.seconds--;
}, 1000);
All of the answers you've been given so far fail to handle one simple fact: setInterval does not happen reliably at the time you set. It can be delayed or even skipped if the browser is busy doing something else. This means you can't rely on your update function to decrement the number of seconds left, you'll start drifting from reality very quickly. Maybe that's okay, maybe not. There's no need for it, in any case: Just calculate when the timeout occurs (e.g., a minute and five seconds from now for your "shoes" counter), and then at each update, calculate how long you have left. That way if an interval got dropped or something, you won't drift; you're deferring the computer's clock.
Here's a procedural version:
// Note that to prevent globals, everything is enclosed in
// a function. In this case, we're using window.onload, but
// you don't have to wait that long (window.onload happens
// *very* late, after all images are loaded).
window.onload = function() {
// Our counters
var counters = {
"shoes":{
"id": "shoe1",
"minutes": 1,
"seconds":5
},
"trousers":{
"id": "trouser1",
"minutes": 10,
"seconds":0
}
};
// Start them
var name;
for (name in counters) {
start(counters[name]);
}
// A function for starting a counter
function start(counter) {
// Find the time (in ms since The Epoch) at which
// this item expires
counter.timeout = new Date().getTime() +
(((counter.minutes * 60) + counter.seconds) * 1000);
// Get this counter's target element
counter.element = document.getElementById(counter.id);
if (counter.element) {
// Do the first update
tick(counter);
// Schedule the remaining ones to happen *roughly*
// every quarter second. (Once a second will look
// rough).
counter.timer = setInterval(function() {
tick(counter);
}, 250);
}
}
// Function to stop a counter
function stop(counter) {
if (counter.timer) {
clearInterval(counter.timer);
delete counter.timer;
}
delete counter.element;
}
// The function called on each "tick"
function tick(counter) {
var remaining, str;
// How many seconds left?
remaining = Math.floor(
(counter.timeout - new Date().getTime()) / 1000
);
// Same as last time?
if (remaining != counter.lastRemaining) {
// No, do an update
counter.lastRemaining = remaining;
if (remaining <= 0) {
// Done! Stop the counter.
str = "done";
alert("Stopped " + counter.id);
stop(counter);
}
else {
// More than a minute left?
if (remaining >= 120) {
// Yup, output a number
str = Math.floor(remaining / 60) + " minutes";
}
else if (remaining >= 60) {
// Just one minute left
str = "one minute";
}
else {
// Down to seconds!
str = "";
}
// Truncate the minutes, just leave seconds (0..59)
remaining %= 60;
// Any seconds?
if (remaining > 0) {
// Yes, if there were minutes add an "and"
if (str.length > 0) {
str += " and ";
}
// If only one second left, use a word; else,
// a number
if (remaining === 1) {
str += "one second";
}
else {
str += Math.floor(remaining) + " seconds";
}
}
// Finish up
str += " left";
}
// Write to the element
counter.element.innerHTML = str;
}
}
};
Live example
Here's an OOP version (using the module pattern so Counter can have named functions and a private one [tick]):
// A Counter constructor function
var Counter = (function() {
var p;
// The actual constructor (our return value)
function Counter(id, minutes, seconds) {
this.id = id;
this.minutes = minutes || 0;
this.seconds = seconds || 0;
}
// Shortcut to the prototype
p = Counter.prototype;
// Start a counter
p.start = Counter_start;
function Counter_start() {
var me = this;
// Find the time (in ms since The Epoch) at which
// this item expires
this.timeout = new Date().getTime() +
(((this.minutes * 60) + this.seconds) * 1000);
// Get this counter's target element
this.element = document.getElementById(this.id);
if (this.element) {
// Do the first update
tick(this);
// Schedule the remaining ones to happen *roughly*
// every quarter second. (Once a second will look
// rough).
this.timer = setInterval(function() {
tick(me);
}, 250);
}
}
// Stop a counter
p.stop = Counter_stop;
function Counter_stop() {
if (this.timer) {
clearInterval(this.timer);
delete this.timer;
}
delete this.element;
}
// The function we use to update a counter; not exported
// on the Counter prototype because we only need one for
// all counters.
function tick(counter) {
var remaining, str;
// How many seconds left?
remaining = Math.floor(
(counter.timeout - new Date().getTime()) / 1000
);
// Same as last time?
if (remaining != counter.lastRemaining) {
// No, do an update
counter.lastRemaining = remaining;
if (remaining <= 0) {
// Done! Stop the counter.
str = "done";
alert("Stopped " + counter.id);
stop(counter);
}
else {
// More than a minute left?
if (remaining >= 120) {
// Yup, output a number
str = Math.floor(remaining / 60) + " minutes";
}
else if (remaining >= 60) {
// Just one minute left
str = "one minute";
}
else {
// Down to seconds!
str = "";
}
// Truncate the minutes, just leave seconds (0..59)
remaining %= 60;
// Any seconds?
if (remaining > 0) {
// Yes, if there were minutes add an "and"
if (str.length > 0) {
str += " and ";
}
// If only one second left, use a word; else,
// a number
if (remaining === 1) {
str += "one second";
}
else {
str += Math.floor(remaining) + " seconds";
}
}
// Finish up
str += " left";
}
// Write to the element
counter.element.innerHTML = str;
}
}
// Return the constructor function reference. This
// gets assigned to the external var, which is how
// everyone calls it.
return Counter;
})();
// Note that to prevent globals, everything is enclosed in
// a function. In this case, we're using window.onload, but
// you don't have to wait that long (window.onload happens
// *very* late, after all images are loaded).
window.onload = function() {
// Our counters
var counters = {
"shoes": new Counter("shoe1", 1, 5),
"trousers": new Counter("trouser1", 10, 0)
};
// Start them
var name;
for (name in counters) {
counters[name].start();
}
};
Live example
More about closures here.
I think it'd make your code a lot cleaner and save you some ifs if you would keep the timeout in code as seconds, rather than minutes and seconds:
var intervals = [];
var counters = {
"shoes":{"id":"shoe1","seconds":65},
"trousers":{"id":"trouser1","seconds":600}
}; // generate this on the server and note there is no comma after the last item
window.onload = function() {
for (var el in counters) { countdown(counters[el]) };
}
function countdown(element) {
intervals[element.id] = setInterval(function() {
var el = document.getElementById(element.id);
if(element.seconds == 0) {
el.innerHTML = "countdown's over!";
clearInterval(intervals[element.id]);
return;
}
var minutes = (element.seconds - (element.seconds % 60)) / 60;
if(minutes > 0) {
var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
} else {
var minute_text = '';
}
var second_text = (element.seconds%60) > 1 ? 'seconds' : 'second';
el.innerHTML = minute_text + ' ' + (element.seconds%60) + ' ' + second_text + ' remaining';
element.seconds--;
}, 1000);
}
(I'd post as a comment if it weren't for all the code...)