Was this helpful?
When the setTimeout() is invoked, there are two stack frames in the call stack and the event queue is empty. As soon as the setTimeout() is invoked, it starts native code in the browser that goes in sleep state and wait for 5 seconds. Do not assume that nothing will happen during this time period i.e. nothing is 'blocked' which means that the browser does not wait for 5 seconds and it immediately moves on executing the next line in second() function, which is the console.log().
After an elapse of 5 seconds, the native thread that slept wakes up and writes a message into the event queue with a handle to the first() function. As we know that the event loop constantly monitors whether the call stack is empty. Since the call stack is now empty, the runtime checks the event queue, it finds a message there and invokes the first() function. As a result, a new stack frame for the first() is created and pushed onto the call stack. After first() is finished executing, both the call stack and the event queue are empty again.
|posted||Sep 12, 2016|
|active||Sep 12, 2016|
|•||Reflection in .NET - Part 1|
|•||Updating a CSS class property in real-time|
|•||Client-side MVC pattern|
|•||Serialization in .NET - Part 4|
|•||Serialization in .NET - Part 3|
|•||Serialization in .NET - Part 2|
|•||Serialization in .NET - Part 1|
|•||How to create pretty URLs in Angular|
|•||In Angular what is the difference between ngRoute and ui-router|