Javascript setinterval() lag in Firefox?

I have wrote this code to make seconds (with decisec & centisec) counting up.

    You've wasted time <span id="alltime">0.00</span> seconds.

    <script type="text/javascript"> 
    function zeroPad(num,count)
    {
    var numZeropad = num + '';
    while(numZeropad.length < count) { numZeropad = "0" + numZeropad; }
    return numZeropad; }
    function counttwo() {
    tall = document.getElementById('alltime').innerHTML;
    if(parseFloat(tall) < 1.00) {     tnew2 = tall.replace('0.0','').replace('0.','');    }
        else {    tnew2 = tall.replace('.','');    }
    tnum = parseInt(tnew2) + 1;
       //check if have to add zero 
if(tnum >= 100) { tstr1 = tnum + ''; }
        else { tstr1 = zeroPad(tnum,3); }
    tlast = tstr1.substr(0,tstr1.length - 2) + '.' + tstr1.substr(tstr1.length - 2);
        document.getElementById("alltime").innerHTML = tlast;
    }
    var inttwo=setInterval("counttwo()",10);
    </script>

In HTML document and run.

It works well but when I use Firefox 4 and run the code. Seems like it LAG a bit (stop a bit before counting up) when it's on some numbers (randomly like 12.20, 4.43). I've tried change "counttwo()" to counttwo but that doesn't help.

I have told some of my friends to run on Firefox 4 too. They said it doesn't lag at all. This cause 开发者_如何学编程because of my computer ? or My Firefox ? or something else ?

Thanks in advance!

PS. Fiddle here: http://jsfiddle.net/XvkGy/5/ Mirror: http://bit.ly/hjVtXS

When you use setInterval or setTimeout the time interval is not exact for several reasons. It is dependent on other javascript running, the browser, the processor etc. You have to take a reliability of +- 15ms for granted afaik. See also ...

That's a lot of counting, so on some computer, yes, it might lag (if it's a prehistoric one or the user's got his processor really busy with something), also if I'm right, that thing won't work with Chrome's V8, since that script would freeze if you switched tabs, and resume executing only when you return to that tab.

If you're just seeing pauses every so often, you're probably seeing garbage collection or cycle collection pauses.

You can test this by toggling your javascript.options.mem.log preference to true in about:config and then watching the error console's "Messages" tab as your script runs. If the GC/CC messages are correlated with your pauses, then they're the explanation for what you see.

As for why you see it but others don't... do you see the problem if you disable all your extensions?

The problem with setInterval is that it can eventually lead to a back-up. This happens because the JavaScript engine tries to execute the function on the interval (in your case, 10ms), but if ever that execution takes longer than 10ms, the JS engine starts trying to execute the next interval before the current one stops (which really just means it queues it up to run as soon as the previous callback finishes).

Since JavaScript executes single-threaded (with the exception of web workers in HTML 5), this can lead to pauses in your UI or DOM updates because it is continuously processing JavaScript callbacks from your setInterval. In worst case scenarios, the whole page can become permanently unresponsive because your stack of uncompleted setInterval executions gets longer and longer, never fully finishing.

With a few exceptions, it is generally considered a safer bet to use setTimeout (and invoking the setTimeout again after execution of the callback) instead of setInterval. With setTimeout, you can ensure that one and only one timeout is ever queued up. And since the timers are only approximate anyway (just because you specify 10ms doesn't mean it will happen at exactly 10ms), you don't typically gain anything from using setInterval over setTimeout.

An example using setTimeout:

var count = function(){
    // do something

    // queue up execution once again
    setTimeout(count, 10);
};

count();

One reason why you may see pauses on some browsers, and not others, is because not all JavaScript engines are created equal :). Some are faster than others, and as such, less likely to end up with a setInterval backup.

Different browsers use different JavaScript engines, so it's possible that this code just finds a spot where Firefox's JägerMonkey scripting engine has some problems. There doesn't seem to be any obvious inefficiencies in the counting itself..

If it's working on your friends' installs of FF4, then it's probably just an isolated problem for you, and there isn't much you'll be able to do by changing the code.