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?
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?
- 1 stackoverflow.com/questions/779379/… – Vinko Vrsalovic Commented Sep 1, 2009 at 2:33
3 Answers
Reset to default 18setTimeout() 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.
I would guess that the timeout only starts when the page is fully loaded, whereas just a plain 'MyFunction()' will execute as soon as it's processed.
The timer will try to execute once your current thread is done. This depends on where you call the window.setTimeout(). If it is in a javascript tag, but not inside a function, then it will be called once the end of the javascript tag is reached. For example:
<html>
<script type="text/javascript">
setTimeout(function(){alert("hello")},0);
var d=Number(new Date())+1000;
while(Number(new Date())<d){
}
alert("hi");
</script>
</html>
If you call the setTimeout inside a function that results from an event occuring, for example onload, then it will wait until the event handler function returns:
<html>
<script type="text/javascript">
document.addEventListener("mousedown",function(){
setTimeout(function(){alert("hello")},0);
var d=Number(new Date())+1000;
while(Number(new Date())<d){
}
alert("hi");
}, true);
</script>
</html>
It is impossible to make one thread in JavaScript wait while another thread is running. Event listeners will wait until the current thread is done before they start running.
The only exception is Web Workers, but they run in a different file, and the only way to communicate between them is using event listeners, so while you can send a message while the other is working, it won't receive that message until it is done, or it manually checks for messages.