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)

1. starting 1 sec setInterval and a global variable that will contain milliseconds and then just reduce -1000 every interval.

2. 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 ?

Answer 1

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