Trust Issues with setTimeout()! 💔 setTimeout Interview Question

#javascript #settimeout #interviewquestions #webdev

setTimeout has trust issues! 💔

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

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");

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

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

console.log("Start");

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

console.log("End");

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

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.