In this blog, we are going to learn a few interesting things about setTimeout() and will see what sort of trust issue we can have with setTimeout(). Just understand this one line you will understand the entire blog "setTimeout with a delay of 5000 ms does not guarantee to be executed exactly after 5000 ms " yes you heard it right so lets us understand it by a simple example.
console.log('start'); // line 1
setTimeout(function () { // line 2
console.log(`here you won't have trust issue`);
},5000)
console.log('end'); // line 3
When we execute the above program the global execution context will be created and after the memory creation phase at the time of code execution, javascript will see the console. log('start'); and it will simply print start then it will move to line 2 where we have setTimeout() in that case javascript will simply register this function with a timer of 5000 ms and will start the timer then it will move to next line because javascript waits for none. Now in line 3 also it simply sees a console. log('end'); so no rocket science for that and it will be the print end after that nothing more to execute so the global execution context will be out of the call stack. Now still our timer is running because the above code hardly takes a few milliseconds to execute now as soon as 5000 ms completed the function will be put into the callback queue and with help of the event loop it will be transferred to the call stack and then this function will be executed and will print "here you won't have trust issue". See here we did not face any issues because we did not have much code to execute on the main thread but what if you have millions of lines of code on the main thread or some heavy operation of the main thread which takes like 10000 ms to execute? Let's see the example.
console.log('start'); // line 1
setTimeout(function () { // line 2
console.log(`here you will have trust issue`);
},5000)
// No need to do deep into this code just understand it helps us to
// blocking main thread for 10 sec consider it as line 3
let startTime = new Date().getTime();
let endTime = startTime;
while(endTime < startTime + 10000){
endTime = new Date().geTime();
}
// After 10 sec line 4 will be executed
console.log('end'); // line 4
The above example and the example we have seen before that has not had much difference only major difference is we are blocking here main thread for 10000ms which means this entire code will take at least 10000 ms to complete and then only the global execution context will be out of call stack you know at this time our setTimeout was already waiting in callback queue from last 5000 ms because we set a timer for 5000 ms so as soon as that timer finishes the function moves to call back queue but event loop can not transfer that function to call stack because call stack is not yet done with its stuff it's still executing that 10000 ms code and until and unless it's not done it won't be able to take anything from call back queue and this way even the setTimeout timer is finished yet code is not executed. THIS IS THE TRUST ISSUE.
So never trust blindly neither on setTimeout nor on people.
There is one more interesting interviewing question about setTimeout() which is what if we pass a delay of 0 ms. What do you think will be output of the below code.
console.log('start'); // line 1
setTimeout(function () { // line 2
console.log(`DONE DANA DONE`);
},0)
console.log('end'); // line 3
This one is simple if we have a good understanding of our previous blog on the event loop. So here even if we pass a delay of 0 ms still it be executed last because no matter what dealy you pass setTimeout must need to go through that callback queue process and javascript will execute lines 1 and 3 and after that only when the call stack is empty then event loop send that function to call stack and then call stack to execute that function and prints "DONE DANA DONE".
That's all about TRUST ISSUES with setTimeout(). And thanks to Akshay Saini for creating an incredible Namaste Javascript playlist this blog is just whatever learning I had from there.