MyFunction() vs window.setTimeout('MyFunction()', 0)?

Question

In javascript, is there any different between these two:

// call MyFunction normal way 

MyFunction();

// call MyFunction with setTimeout to 0 //

window.setTimeout('MyFunction()', 0);

The reason I asked was because recently came across the situation where the code only works if I use setTimeout(0) to call the function. To my understanding, setTimeout(0) is exactly same as calling a function directly because you dont set any delay. But from what I see how it works in the code, setTimeout(0) seems to get executed last.

Can someone clarify exactly how setTimeout(0) really get called in order of the rest of other function call?

Answer 1

setTimeout() always causes the block of JavaScript to be queued for execution. It is a matter of when it will be executed, which is decided by the delay provided. Calling setTimeout() with a delay of 0, will result in the JavaScript interpreter realizing that it is currently busy (executing the current function), and the interpreter will schedule the script block to be executed once the current call stack is empty (unless there are other script blocks that are also queued up).

It could take a long time for the call stack to become empty, which is why you are seeing a delay in execution. This is primarily due to the single-threaded nature of JavaScript in a single window context.

For the sake of completeness, MyFunction() will immediately execute the function. There will be no queuing involved.

PS: John Resig has some useful notes on how the JavaScript timing mechanism works.

PPS: The reason why your code "seems to work" only when you use setTimeout(fn(),0), is because browsers could update the DOM only when the current call stack is complete. Therefore, the next JavaScript block would recognize the DOM changes, which is quite possible in your case. A setTimeout() callback always creates a new call stack.