DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Vinayak Savle
Vinayak Savle

Posted on

Trust Issues with setTimeout()! πŸ’” setTimeout Interview Question

setTimeout has trust issues! πŸ’”

setTimeout(function a() {
   console.log("Example");
}, 5000);
Enter fullscreen mode Exit fullscreen mode

If you execute the above program it might take 5 sec or more than 5 sec to log the result of function a. Yes, you read it right because it all depends on the callstack.

To prove the above statement we will see one example:
Example 1:

console.log("Start");

setTimeout(function a() {
   console.log("Callback");
}, 5000);

console.log("End");

let startDate = new Date().getTime();
let endDate = startDate;

// Added 10 sec timer
while (endDate < startDate + 10000) {
   endDate = new Date().getTime();
}

console.log("While expires");
Enter fullscreen mode Exit fullscreen mode

Guess what will be the output of the above program. You might be thinking that first in the console Start will get print then End will get print. Which is absolutely right! After that you might be thinking setTimeout function a will execute after 5 sec but the answer is NO. Because at first GEC (Global execution context) is created and it adds in callstack as it will take 10 sec to run GEC code and setTimeout will get registered in Callback Queue and event loop will call setTimeout function only when callstack gets empty so that's why it will execute after 10 sec. So that's how the whole concurrency model works.

Output:

Start
End
While expires
Callback
Enter fullscreen mode Exit fullscreen mode

Take one more example to understand the concept.
Example 2:

console.log("Start");

setTimeout(function a() {
   console.log("Callback");
}, 0);

console.log("End");
Enter fullscreen mode Exit fullscreen mode

Now guess what will be the output of the program. In the above example, you can see setTimeout will be in callback queue and it will be called only after the callstack gets empty which will be after Start and End print in the console.

Output:

Start
End
Callback
Enter fullscreen mode Exit fullscreen mode

You must be thinking who the hell writes 0 sec in setTimeout. But you can write 0 sec in setTimeout in particular condition like if you want to execute particular code after all function gets executed as setTimeout function will be in callback queue which will be executed once callstack gets empty. In such a condition you can use 0 sec in setTimeout.

Even I was not aware of this till I watched the Namaste javascript series by Akshay Saini. Believe me, friends many senior developers will fail to answer correctly the output of the above examples.

So, This is my first post do let me know in the comment section if you really amazed by this concept.

Top comments (4)

Collapse
 
rayanelsiddig profile image
Rayan Elsiddig • Edited on

I knew about it a few months ago and I was surprised too .

I knew it from hereπŸ‘‡
youtu.be/8aGhZQkoFbQ

Collapse
 
vinayaksavle profile image
Vinayak Savle

Yes me too! Thanks for the link.

Collapse
 
zinzinnguyen profile image
ZinZinNguyen

perfect post

Collapse
 
vinayaksavle profile image
Vinayak Savle

Thank you!

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

β­οΈπŸŽ€ JavaScript Visualized: Promises & Async/Await

async await