Why does the setTimeout 0 not executing at the end of the function

Question

I am new to Javascript, and recently got to know the use of setTimeout set to 0 millis. I am trying to implement it but not getting what is expected. As per my knowledge it has to wait until all events finished but it is not behaving expectely. Please tell me what I am missing or where I am wrong.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test HTML</title>

</head>
<body>

    <script src="js/index.js"></script>
</body>
</html>

index.js

(function(){

    setTimeout(function () {
        document.write("<p>Event 0 Processed !!</p>");
    },0);

    setTimeout(function () {
        document.write("<p>Event 1 Processed !!</p>");
    },1000);

    setTimeout(function () {
        document.write("<p>Event 2 Processed !!</p>");
    },2000);

    setTimeout(function () {
        document.write("<p>Event 3 Processed !!</p>");
    },3000);

})();

output

Event 0 Processed !!

Event 1 Processed !!

Event 2 Processed !!

Event 3 Processed !!

I was expecting something like

Event 1 Processed !!

Event 2 Processed !!

Event 3 Processed !!

Event 0 Processed !!

Thanks :)

You mean you were expecting to see result of the call to setTimeout(..., 1000) before setTimeout(..., 0)? — csharpfolk, May 26 '16 at 14:26
Possible duplicate of [Asynchronous vs synchronous execution, what does it really mean?](http://stackoverflow.com/questions/748175/asynchronous-vs-synchronous-execution-what-does-it-really-mean) — kemicofa ghost, May 26 '16 at 14:27
*All* of your `setTimeout` calls are asynchronous. They all are added to the "queue" and ran once the current function is done (and the amount of time has passed). 0ms should happen before 1000ms. — gen_Eric, May 26 '16 at 14:27

score 7 · Accepted Answer · edited May 23 '17 at 12:07

setTimeout with a delay of 0 waits for the current call stack to clear, not the event queue. The other timeouts all enqueue a callback, so they are not part of the call stack.

If you were to immediately call a logging function, the 0 timeout would wait for that to complete, but not other timeouts. For example:

function log(n) {
  console.log("Event", n, "processed!");
}

setTimeout(log.bind(null, 0), 500); // wait 0.5 seconds
setTimeout(log.bind(null, 1), 0); // wait until the stack clears
log(2); // run now

As MDN explains it:

even though setTimeout was called with a delay of zero, it's placed on a queue and scheduled to run at the next opportunity, not immediately. Currently executing code must complete before functions on the queue are executed, the resulting execution order may not be as expected.

As Jeremy Starcher mentioned in their deleted answer, a delay of 0 is a soft 0ms. It will put the callback to the top of the queue, but provides no guarantee that it will actually be run immediately. The current context must exit, which could be immediate or never occur. On top of that, browsers only check the queue for pending callbacks occasionally, so the implementation may introduce an extra delay.

score 0 · Answer 2 · answered May 26 '16 at 14:28

0

Well these statements are executed from 0 to 3000 ms.

As per my knowledge it has to wait until all events finished..

No, they should wait for as long as You specified (0, 1000, 2000 or 3000 ms)

answered May 26 '16 at 14:28

Bogdan Kuštan

5,427
1
21
30

Michael Rouse · Answer 3 · 2016-05-26T14:33:26.380

-1

When you have this:

setTimeout(function () {
    document.write("<p>Event 0 Processed !!</p>");
},0);

Is close to saying:

document.write("<p>Event 0 Processed !!</p>");

Because it will wait 0ms before it executes, so right away.

If you want the order to be the opposite direction then the delay on Event 0 needs to be the longest.

edited May 26 '16 at 14:33

answered May 26 '16 at 14:29

Michael Rouse

107
1
6

2

Waiting 0ms and executing immediately are not the same thing. The docs for `setTimeout` are very clear that it will enqueue a callback to execute when the current context has finished, which could be anywhere from immediate to never. – ssube May 26 '16 at 14:30
@ssube Yes, I am aware that they are not the same thing. But as far as OP is concerned, since it seems he is just learning, then this is a good enough explanation. You don't start out in CS class learning the nitty gritty details, you take it one step at a time. – Michael Rouse May 26 '16 at 14:32

Why does the setTimeout 0 not executing at the end of the function

index.html

index.js

output

3 Answers3