Sequence of execution for JavaScript setTimeout

Question

I am trying to understand the way setTimeout gets executed.

In the sample below, I was expecting to see 'Inside setTimeout' as the second line in the console log.

But, I always see 'Inside setTimeout' as the third line in the console log.

This is what I see in the log consistently:

First
Last
Inside setTimeout

Any idea why is it behaving this way?

<script>
console.log('First');
// NOTE: 0 milliseconds.
setTimeout(function() {console.log('Inside setTimeout')}, 0);
console.log('Last');
</script>

JavaScript will do other things while that message is queued and waiting. — zer00ne
– zer00ne, Commented May 26, 2018 at 13:58

T.J. Crowder · Accepted Answer · 2018-05-26 13:57:49Z

3

Even with a 0ms timeout, it still schedules the function to be called asynchronously. The way setTimeout works is:

Do some validations on the input
Add the function to a list to be called as of X time
Return

Later, when the specified amount of time has passed, the browser will queue a task to call the function, which will be processed by the event loop when the tasks in front of it have been processed.

It never calls the function immediately. That would chaotic; by always calling it asynchronously, it's consistent. (That's also why a promise's then and catch handlers are always called asynchronously, even if the promise is already settled.)

All of the gory details are in the specification.

answered May 26, 2018 at 13:57

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shaibal S Over a year ago

Thanks for clarifying, I was missing asynchronous execution and event loop in this context.

Abhijith S · Accepted Answer · 2018-05-26 14:43:32Z

Working of the setTimeout(function, delayTime) with an example: More details can be found here.

function main(){
  console.log('A');
  setTimeout(
    function display(){ console.log('B'); }, 0);
    console.log('C');
}
main();

//  Output
//  A
//  C
//  B

The call to the main function is first pushed into the stack (as a frame). Then the browser pushes the first statement in the main function into the stack which is console.log(‘A’). This statement is executed and upon completion that frame is popped out. Alphabet A is displayed in the console.
The next statement (setTimeout() with callback exec() and 0ms wait time) is pushed into the call stack and execution starts. setTimeout function uses a Browser API to delay a callback to the provided function. The frame (with setTimeout) is then popped out once the handover to browser is complete (for the timer).
console.log(‘C’) is pushed to the stack while the timer runs in the browser for the callback to the exec() function. In this particular case, as the delay provided was 0ms, the callback will be added to the message queue as soon as the browser receives it (ideally).
After the execution of the last statement in the main function, the main() frame is popped out of the call stack, thereby making it empty. For the browser to push any message from the queue to the call stack, the call stack has to be empty first. That is why even though the delay provided in the setTimeout() was 0 seconds, the callback to exec() has to wait till the execution of all the frames in the call stack is complete.
Now the callback exec() is pushed into the call stack and executed. The alphabet C is display on the console. This is the event loop of javascript.

so the delay parameter in setTimeout(function, delayTime) does not stand for the precise time delay after which the function is executed. It stands for the minimum wait time after which at some point in time the function will be executed.

--Copied from medium

PS: The best working video example by Philip Roberts.

Collectives™ on Stack Overflow

Sequence of execution for JavaScript setTimeout

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related