Question

I’d like to make a js watch that:

• Start time is server time (the server will supply that in the page’s source code).
• Updates every second.
• (preference, not obligatory) Compatible with the latest versions of gecko, webkit, presto and IE.

I have already checked many implementations of this but I wanted to know which one is the most efficient one. That is: the one that takes less resources from the PC and the one that is more precise among all the ones that exist.

Answer 1

A clock that ticks every second is basically animation, so one could benefit from recursive requestAnimationFrame (with fallback to setTimeout).

var previousTime = 0;

function update(time) {
    if (time - previousTime >= 1000) {
        redrawClock(time);
        previousTime = time;
    }
    requestAnimationFrame(update);
}

With setInterval you’d have to create a Date object on each iteration, because setInterval‘s own delay may take longer than it’s formal value. See John Resig’s brilliant article on timers in JavaScript.

requestAnimationFrame on the contrary is:

1. More efficient, optimized for the task.
2. Provides an accurate timestamp to it’s callback.