window.setTimeout behaviour when window not in focus [duplicate]

Question

Here's the simplest code for reproducing I could think of:

ms = 30; // 1000 ?
num = 1;
function test()
{
    num+=ms;
    document.getElementById('Submit').value = num; // Using native Javascript on purpose
    if (num < 4000)
        window.setTimeout(test, ms);
}
test()

I set the ms (milliseconds between iterations) to 30, ran the script and moved to different tab on the browser.

Then I wait for about 10 seconds (the script should finish within 4 seconds) and came back to the tab.

If I used Firefox I saw that the script has not finished, and the numbers are still running (resuming from where I left them, I guess).

Which is annoying enough,

But if I changed ms to 1000 and repeat the above steps, when I come back to the tab I saw the script has indeed already finished.

(The script should still take 4 seconds to finish).

Namely, sometimes Firefox runs window.setTimeout even if the window is out of focus, and sometimes it doesn't. Possibly depending on the duration

On the other hand, this is not happening with Internet Explorer.

It keeps running the script even if the tab is not focused. No matter how I set the ms.

• Is that due to some performance considerations of Firefox?

• What exactly is happening?

• How come such a basic thing is in consistent between browsers, nowadays?

OR, am I working wrong? Is it a weird way for coding?

I'm just trying repeatedly change the DOM, in a delayed fashion, without using setInterval (because I'm changing the interval it self on the go).

• And most important, how should I regard this?

I can't assume my user won't leave the tab.

I want to allow my user to leave the page for as mush as one might like.

If one leaves and come back after half an hour, he/she will see irrelevant animations on the page, still running.

Some of these animations are seen by all the users connecting to the page.

There is no need they will be synchronized in resolution of milliseconds, but I can't start them only when the user put the tab/window in focus.

I'm using Firefox 25.0.1, and IE 11. (Windows 7)

Answer 1

see the difference: http://jsfiddle.net/qN6eB/

ms = 30; // 1000 ?
num = 1;
start = new Date();

function test()
{
    num+=ms;
    document.getElementById('Submit').value = num;
    if (num < 4000)
        window.setTimeout(test, ms);
    else
        document.getElementById('Time').value = new Date() - start;
}

test()



ms2 = 30; // 1000 ?
num2 = 1;
start2 = new Date();
dueTo = new Date(+new Date()+4000);

function test2()
{
    num2+=ms2;
    document.getElementById('Submit2').value = num2;
    if (new Date() < dueTo)
        window.setTimeout(test2, ms2);
    else 
        document.getElementById('Time2').value = new Date() - start2;
}
test2()