Trying to display multiple count down timers on same page

Question

I am trying to display several count down timers on same page. now as far as i know there are 2 ways of doing it without using jquery plugins or some other scripts (if you know of a good one please let me know)

starting 1 sec setInterval and a global variable that will contain milliseconds and then just reduce -1000 every interval.
creating a function that reduce 1 sec from a global variable and then at the bottom of that function setting a setTimeout of 1 sec that will run that functions so basically recursion every 1 sec.

My question is which of the 2 options will work better and/or faster?

here is demonstrative code for both:

setInterval:

var amount_of_seconds_left = 46800000;

setInterval(function(){
if(amount_of_seconds_left > 1000){
    amount_of_seconds_left -= 1000;
}
},1000);

setTimeout:

var amount_of_seconds_left = 46800000;
function startTime(){
if(amount_of_seconds_left > 1000){
    amount_of_seconds_left -= 1000;
    t=setTimeout(function(){startTime()},1000);
}
}

Both ways could work but i was wondering performance wise which is better and is performance is even an issue with this ?

score 0 · Answer 1 · edited May 23 '17 at 10:24

0

I belive that the setInterval code executes every 1000ms exactly, while the setTimeout waits 1000ms, runs the function, which takes some ms, then sets another timeout. So the wait period is actually greater than 1000ms.

From this post:

setTimeout or setInterval?

edited May 23 '17 at 10:24

Community

1
1

answered Nov 26 '12 at 07:32

rahul

7,573
7
39
53

I see. bah i was hoping to use the other one :-) – Neta Meta Nov 26 '12 at 07:37
Do you think i should start several intervals for each timer ? or 1 big interval that would run all the time updating under it ? – Neta Meta Nov 26 '12 at 07:43

score 0 · Accepted Answer · answered Nov 26 '12 at 08:18

0

setInterval and setTimeout don't start after 1000ms e.g. if another script is running, so both can cause delays. It would be better to use the setIntervall to call the display update only and use the the Date object to calculate the exactly remaining time. E.g. after the browser was busy the timer shows the correct time after the next update.

Here an example:

HTML:

<div id="timer1"></div>
<div id="timer2"></div>

javascript:

// update all timer
function updateTimer() {
    for (var i in aTimer) {
        var oTimer = document.getElementById(aTimer[i].sId);
        var iSeconds = parseInt((aTimer[i].iFinished - Date.now()) / 1000);
        oTimer.innerHTML = iSeconds;
    }
}

// Init all timers with DOM-id and finish time
var aTimer = [
    { sId: 'timer1', iFinished: Date.now() + 46800000 },
    { sId: 'timer2', iFinished: Date.now() + 780000}
];

// call display update
setInterval(function() {
    updateTimer();
}, 333);

answered Nov 26 '12 at 08:18

scessor

15,995
4
43
54

Yours is a good solution as well. i did something similar to yours but in a much less sophisticated way I just define an array with keys as the IDs of the elements, and milli seconds as the value then i run the functions for each of the array keys. with a value bigger then 1000 – Neta Meta Nov 26 '12 at 08:49
The most important part of my solution is to use the `Date` object! Delays resulting from subtracting (`amount_of_seconds_left -= 1000;`)! – scessor Nov 26 '12 at 09:01
i went over your solution again and its spot on what i needed. with my idea i had a problem with the array i made since i used the ID of element as keys of the array and the ids wasnt always 1/2/3/4 they could be with bigger gaps and in this case the each runs all those empty cells for nothing. your idea is great.. The date idea is really a nice offset. – Neta Meta Nov 26 '12 at 09:59

Trying to display multiple count down timers on same page

2 Answers2