Javascript – Execution order of multiple setTimeout() functions with same interval


Consider the following Javascript code:

function(){    setTimeout(function() {        $("#output").append(" one ");    }, 1000);    setTimeout(function() {        $("#output").append(" two ");    }, 1000);}

You can also see this example on jsfiddle.

Can I be sure that the value of #output is always "one two", in that order? Usually, I would handle this problem like this:

function(){    setTimeout(function() {        $("#output").append(" one ");        $("#output").append(" two ");    }, 1000));}

But I can not do it that way because I get messages from a server which tells me which function to execute (in this example append "one" or append "two"), which I have to execute with a small delay.

I already tested this code in Internet Explorer 9, Firefox 14, Chrome 20 and Opera 12, and the output was always "one two", but can I be sure that this will always be the case?

Best Solution

The Spec is here.

My interpretation of setTimeout step 8 in section 7.3 is that the execution order is supposed to be guaranteed.

However, I investigated this issue because when the window is minimized and then maximised in Chrome, I was finding that timeouts set in events coming from external sources (like websockets or webworkers) were being executed in the wrong order. I assume this is a browser bug and will hopefully be fixed soon.