Firefox invokes setTimeout function too soon (or Date.getTime() is off?)

Question

I've run into a strange issue in Firefox 12. setTimeout() doesn't seem to always wait the appropriate length. Or perhaps it's the date's milliseconds that don't jive?

Check out this fiddle. Essentially, a setTimeout of 100ms seems to run anywhere between 80ms and 110ms. More I can understand, based on John Resig's explanation of timers. But less?

You may have to refresh it once or twice to see the issue, as it sometimes works correctly on the first run. It seems to work spifftacular in IE and Chrome.

Here's the code I'm using in my fiddle:

var txt = '',
    TIMEOUT_LENGTH = 100,
    _now;

now = Date.now || function() { return new Date().getTime() };

function log(time) {
    c = time < 100? 'class="error"' : '';
    $('#log').append('<p '+c+'>waited ' + time + '</p>');
}

function defer() {
    var d = $.Deferred(),
        start = now();
    setTimeout(function() {
        d.resolve(now() - start);
    }, TIMEOUT_LENGTH);
    return d.promise();
}

for (var i = 0; i < 20; i++) {
    defer().then(log);
}

Here's a sample of the quirky output:

Here's my browser info:

And thanks so much for reading my question! I hope someone can shed some light into this.

MORE INFO

I worked around the problem by using setInterval() and checking each increment to see if the required time has passed. See this fiddle.

However, I'm still very interested to hear if anyone can shed some light into the source of the issue

Answer 1

Yes. setTimeout's accuracy is based off many factors, and isn't guaranteed to always execute at the exact time you specify.

I cannot say this with any authority, but I'll hazard a guess that Firefox, in an attempt to seem faster, will speed up the JS engine temporarily to get everything in motion (which is interesting, because in my experience, timer-based functions actually run slower at first initially in my version of firefox).

Neither setTimeout nor setInterval promise that they will execute at the exact right time, as the link you posted stated. However, with setInterval, you get the benefit of the timer loop doing what it can to "correct itself" by catching up if it lags too far behind, so for whatever you're trying to do, it may be more appropriate.

Anyway, here's my results on my Macbook 10.6.8:

Firefox 5.0.1:

waited 92
waited 92
waited 93
waited 93
waited 93
waited 93
waited 93
waited 94
waited 93
waited 93
waited 93
waited 93
waited 94
waited 94
waited 94
waited 94
waited 94
waited 95
waited 96
waited 96

Safari 5.1.5:

waited 100
waited 104
waited 104
waited 103
waited 104
waited 104
waited 104
waited 104
waited 104
waited 104
waited 104
waited 104
waited 104
waited 104
waited 104
waited 104
waited 104
waited 104
waited 104
waited 104

Chrome 19.0.1084.52:

waited 101
waited 103
waited 103
waited 104
waited 104
waited 103
waited 103
waited 103
waited 103
waited 103
waited 103
waited 103
waited 103
waited 103
waited 104
waited 104
waited 104
waited 104
waited 104
waited 104

Answer 2

JavaScript is synchronous. The browser will add your setTimeouts to the queue and execute them after

1. The countdown is over
2. It has finished any other tasks that are in the queue at the moment the countdown is over.