Are equal timeouts executed in order in Javascript?
Suppose I do
setTimeout(foo, 0);
...
setTimeout(bar, 0);
Can I be sure foo will begin executing before bar? What if instead of 0 I use a timeout of 1, 10, or 100 for bar?
Simple experiments show that in the case of equal timeout values the timeout targets are executed in the same order as the setTimeouts themselves, but is it safe to rely on this behavior?
It is not safe to rely on this behavior. I wrote a test script which schedules a number of functions (and they in turn also schedule a number of functions) all using setTimeout(..., 0), and the order in which the functions were called was not always the same as the order in which setTimeout was called (at least in Chrome 11, which I used to run the script).
You can see/run the script here: http://jsfiddle.net/se9Jn/ (the script uses YUI for cross-browser compatibility, but Y.later uses setTimeout internally).
Note that if you just run the script and stare at the console, you will probably not see an offending ordering. But if start the script, switch to another tab, load some pages, and come back to the test page, you should see errors about callbacks out of order in the console.
If you need a guaranteed ordering, I would recommend scheduling the next function at the end of the previous function:
setTimeout(foo, 0);
...
function foo() {
...
setTimeout(bar, 0);
}
I read through the Firefox source code, and at least for that browser, there is a sequentiality guarantee for timeouts which are specified in nondecreasing order. Otherwise all bets are off.
Specifically, if in a given execution context you set a timeout for n, and then one for m, where n <= m, the targets will be executed in the order the timeouts were set.
But don't take my word for it. I believe the window implementation is in nsGlobalWindow.cpp, and the method which actually decides where timeouts go in the execution queue is called InsertTimeoutIntoList. It looks like the method traverses the queue backwards looking for the first timeout which is less than or equal to the given timeout, and inserts the given timeout after it.
Of course when the timeout is set the current clock time is added to the timeout value. This is why the timeout values must be in nondecreasing order for the targets to be executed in sequence.
The answer is: No, execution order is not guaranteed. I have occasionally seen non-FIFO ordering in chrome 40, especially if I pause in debugger while timeouts are pending. I also had a rare sighting in the wild - it was the only plausible explanation of an incident I investigated.
If you need guaranteed execution order, instead of setTimeout(callback, 0)
you can do this:
var queue = [];
function handleQueue() {
queue.shift()();
}
function queueCallback(callback) {
queue.push(callback);
setTimeout(handleQueue, 0);
}
Now, for guaranteed foo
, bar
order you can:
queueCallback(foo);
...
queueCallback(bar);
In short, don't count on it. Have a look at this.
There's a lot of information in this figure to digest but understanding it completely will give you a better realization of how asynchronous JavaScript execution works.