DATEV TechBlog
Published in

DATEV TechBlog

DATEV Nine-Nine | Asynchronicity and the Javascript Event Loop

By: Matthias Alt, Stephan Bierwirth & Gerrit Riesch

Intro

The Javascript Event Loop is one of those things that most Javascript developers hear about at some point but only few bother taking an intense ride on this Loop-the-Loop and dig into the matter. The topic is nevertheless very interesting and can be helpful for dealing with Javascript. Therefore, we want to give you a short and — hopefully — easy to understand overview of the Event Loop.

Asynchronous Javascript

Javascript is single threaded. Every function runs to completion, which means that it cannot be preempted and will have to finish before any other code can run. But if that’s true then how does all the asynchronous code work properly? How is it possible to just “wait” for an AJAX request to finish and do some other things while waiting without blocking the thread?

Well, there are a couple of structures that work together with the Event Loop to make all this possible.

Event Loop, Call Stack, Event Queue and Browser API

So how does it work? Let’s first take a look at the Call Stack. As you might assume by its name it is a stack on which operations that are to be executed get pushed in the order that they are being called. Every function call forms a frame on the stack including references to arguments and local variables of the call. Operations that are finished get popped.

Additionally, there is the Event Queue (aka Callback Queue) that — like a proper queue — ensures the order of operations for execution is kept. Triggered by the Event Loop the runtime will take the oldest message on the queue calling the corresponding function with the message as an input parameter and create a new frame for the Call Stack. This will only happen if the Call Stack is empty — otherwise processing of functions continues first until it’s empty.

Even though that’s interesting it still doesn’t help us with our aforementioned problem of asynchronous tasks. For this we need the Browser API. In all browsers there’s a set of built-in Web APIs supporting complex operations and accessing data. The Browser API also gets involved when we create an asynchronous task: Instead of putting the task directly on the Call Stack, the Browser API starts its own task and finally sends it at some point (after e.g., a timeout finished) back to the Event Queue for processing. By doing this the asynchronous task does not block the Call Stack.

Now let’s have a look at the event loop. It loops (surprise!) and checks if the Call Stack is empty. If the stack is in fact empty it will push the next function to the call stack. This continues until the queue is empty. Then it begins to sleep and to wait for more tasks. The algorithm looks something like this:

  1. While tasks left → execute tasks (begin with oldest task)
  2. Wait until task comes in → if task comes in go to 1

So, after all the concept of the Event Loop per se is not really that complicated. However, our description is a simplified one and we for example ignored the existence of Microtasks and Macrotasks to focus on the basics. If you want to delve into the Event Loop processing model you can find the specification here.

Nine-Nine Tip: setTimeout(0)

The concepts we discussed also explain why using setTimeout(0) does not mean that something will be executed immediately. It merely gives a minimum time until it is executed — not a guaranteed time for the runtime to process it. Something to keep in mind. ;-)

Final thoughts

In this article we showed you in an abstract and simplified way how Javascript does asynchronicity, what the Event Loop is and how it interacts with other parts of the Browser and the Javascript Runtime. This overview will hopefully be handy when it comes to debugging some complex scenarios, optimizations or just for understanding Javascript a little better. If you want to take a deep dive into this topic you can look at the specification mentioned above. We deliberately tried to keep this article as basic as possible.

We hope you enjoyed our blog, and we would love to see you next time!

Your three DATEV Nine-Nine detectives,

Matthias Alt (LinkedIn)

Stephan Bierwirth (LinkedIn)

Gerrit Riesch (LinkedIn)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store