5 min read
By Henrietta Eide Bleness
December 13, 2020
The star of the Christmas dinner, for many Norwegian families, is the Christmas Ribbe (pork belly). But you can’t shine like a star if you’re not accompanied by other great participants. For example the sausage, or the potato. With this trio, you can’t go too wrong with the dinner, so we are going to keep them in this saga. Now we have all the elements to learn about the event loop.
As a thought experiment, let’s say we are single threaded as well. Therefore, when we read the recipe for the
ChristmasDinner, we read the recipe from top to bottom, executing tasks as we go.
Before we dive into the Web API we have to establish that the JS engine uses a call stack for all tasks it has to execute. Since it’s a stack, it’s
first in, last out. Just like a stack of plates. Let's dive in. The Web API includes the DOM API,
setTimeout and HTTP request, among others. The stack won't take the task out of the stack before it returns a value. This is where the
setTimeout, for example, comes in handy. By wrapping the function in a
setTimeout the call stack sends the function to the Web API. Then the Web API holds on to the callback until the timer is done, before returning the function. Hence, the JS engine doesn't freeze.
cookRibbe will invoke the
setTimeout function, illustrated by the oven letting us know the ribbe is done.
When the ribbe is done, we can push the callback back on the call stack for execution. Although it sounds simple, this is where it gets a tad more complicated. The Web API is not allowed to push the callback straight back on the call stack. Why? Remember when we talked about JS being single threaded? Yeah... it’s still a thing. Therefore the Web API pushes the callback onto the queue.
And this is where the event loop enters the saga. The event loop has one job, pushing callbacks from the queue onto the call stack. If the call stack is empty, the event loop pushes the callback straight onto the stack. There you go, pretty easy right?
Sadly, it’s always a twist. Most likely you are busy mashing potatoes, and are not able to take the ribbe out of the oven right away when it’s done 😬. The ribbe will then sit in the oven until your hands are free and you can take it out. And if you already have the queue stacked up with stuffing sausage or setting the table, the callback will be pushed to the back of the queue. There it might wait, in this example, for hours. In the browser, for minutes.
When the stack is cleared and the queue is empty, then the task can be executed. Hopefully the ribbe did not have to wait for hours in the oven and you’ll be the family hero. But if the queue is full, the ribbe will be burned. Let’s just hope JustEat delivers on Christmas Eve.
That’s it. This is why you as a developer may be a bit frustrated. Even though you set a timeout it might not be executed when you intended. And now you know why.