“A Zero in setTimeout” said JavaScript

Hey There !

Out of the zillion things we do while writing a JavaScript Code, all of us comes to a point where we need to render stuffs based on some time intervals. And well, all thanks to JavaScript, it has given us “setTimeout”.

We all know the code to do that ,but have you ever thought how it does ? Or Why ?

This is Hariom Sinha here and I am going to tell you one brief detail about how set timeout works followed by a Code Piece :).

Lets say, you have to print A, B, C and D in some sequence, but , but, but, .. you need to print C at the last. What I mean to say is that, you have to print something like this :

A

B

D

C

onto you console.

So, to do this, we all know, we will do something like this :

console.log(“A”);

console.log(“B”);

setTimeout(()=>{ console.log(“C”); } , some-defined-wait-time );

console.log(“D”);

And, Thats it, the dish is served. But how the heck the Chef did that ? Well lets see..

So, JavaScript has something called “Event Loop” where it moves a process / request to some defined states and then help us get that done.

To make this understandable in a more clearer way, focus on the snap which you see below.

For the first console.log(“A”), the event loop dumps the process first to the Execution Stack and prints it.

For the second console.log(“B”), same.

For the third console.log(“C”), the event loop dumps the process first to the Execution Stack, and then, when it sees it to be a set timeout, it puts that process to the Queue Table. The only task of Queue table here is to keep that process till it completes its “some-defined-wait-time”. And ,when it does so, it dumps that to the Event Queue. Now, the third and the last step comes. Since the process inside the timeout has already spent a zillion of “some-defined-wait-time”, it wants to get printed. Isn’t it ? But as soon as this is dumped to the Event Queue, Event Loop sees another process in the Execution Table ( well, no one waits for anyone here .. #async ). So, to keep things simple, Event Loop processes the fourth console.log(“D”) and then once the stack gets empty, it prints the “the long waited..”C”.

This means, Stack gets a higher precedence than the Queue because of the ASYNC nature here.

This is how its done. So much of work to do some small print.

Well, but why the crap, the title of this Blog has a “Zero” in it.

Lets see why ..

What would you think if i ask you to tell me if below is right or wrong..

setTimeout(someMethod, 0); // for the third console.log above.

Think.

Since you have came so far till here, you must have known the easy process the SetTimeout follows to process its function, you know that it has to wait for sometime in the Event Table. Here, this ‘sometime’ is zero. But since then, it has to move to the to the Event Queue, it has to wait until the stack gets cleared. This means, even if it has a zero wait, it has to wait for all.

#Even Zero Matters.

Hope you have understood this well and if you have any doubts, thoughts or appreciation, do let me know on Comments tabs.

Happy Dev.

Hariom.