Hi folks !! Today we are going to see about event loop. This is just a content sharing…..over content is injurious to health so i just gave a small amount of content . Just read the content and live well!!!
First of all what is event loop ?
Event loop is nothing but a built-in mechanism which handles the execution of multiple chunks of your program.
Let’s dive into event loop:
consider the following code:
console.log(“hello”);
setTimeout(function cb(){
console.log(“inside timeout”);
},3000);
Console.log(“final”);
Execution of the code:
Firstly, the console.log(“hello”) moved to call stack(Reference:call stack), then print it in console
Then setTimeout pushed inside the call stack, (setTimeout is a function not provided by js but by the browser.) So it moved to the webAPI [web api is a thread that we can’t access just make calls to them]from call stack
Browser immediately start the timer for call back function
Controls moved to console.log(“final”) and print it in console.
Finally our setTimeout comes into picture, once the time expired, call back function moved to the queue called task/callback queue
call back queue:
A queue where the asynchronous code is enqueued. i.e,. The code return by the web api’s.
Then how call back function placed inside the call stack ?
Here only the event loop comes!!!
EVENT LOOP:
The main job of event loop is keep monitoring the call stack and callback queue. If the call stack is empty then event loop check the callback queue whether it contains task or not. If the callback queue contains task/function then event loop take the task from queue and push into the call stack and call stack immediately execute it.
In our code the cb() moved to the callback queue once the time expired. Event loop checks the call stack , if it’s empty then push cb() to call stack, then console.log(“inside timeout”) logged into console.
suppose if we are using fetch (refer here: fetch)in our code, then what will happen ? don’t overthink. Just recall the setTimeout function execution above. Instead of waiting for the time to expire , browser wait for the response from server. Because we used fetch to get some response from the server for the given URL. After receiving response ,the fetch API have some function or some lines of code to execute. So, that function can be placed inside microtask queue. Then event loop start it’s work. But wait !! what is microtask queue??? we placed setTimeout callback function inside callback queue but fetch function placed inside micro task queue? yes, high priority task will be placed inside the micro task queue, low priority task will be placed inside the call back queue. Event loop always executes the tasks inside micro task queue then only execute the call back queue task.
consider if we have multiple tasks inside microtask queue and only one task inside the call back queue. Event loop checks the call back queue only after finish executing all the task inside the microtask queue.
But, here is the problem. microtask queue have multiple say 100 tasks but in call back queue have only one task. so task inside the call back queue wait for event loop to finish all the 100 task inside microtask queue. so task inside callback queue become starved.
Then next question !!! what is starvation?
STARVATION:
The process/task waits for long time to execute because of high priority task execution is called starvation. Sometime the low priority task [i.e,. in our case task inside call back queue] wait indefinitely.
Thanks for reading.
