Async JavaScript Visualized With Ease

@ JavaScript

Understanding How Asynchronous JavaScript Works

In the browser execution environment, JavaScript is single-threaded, which means it can only execute one thing at a time. This is usually not a problem, but suppose there is a super complicated event that takes 30 seconds to process, or you’re fetching an external resource that might take an unknown amount of time. In such cases, everything else will be left pending, making the user wait.

This is a significant problem, but the solution is quite simple: “Don’t just stand there waiting!“.

If you’ve ordered delivery, would you just wait for the delivery person to come before eating, or would you do other things in the meantime? Surely the latter. The same principle applies: various execution environments (runtime) offer functionalities that JavaScript itself does not have to handle asynchronous operations. For example, in a browser, there are Web APIs that can easily create asynchronous behaviors and avoid event blocking on the web.

Visualizing Terminology

Call Stack: Handling Things, Like Eating Pancakes

Returning to the JavaScript engine itself, when a function is called, it gets added to something called the “Call Stack” (stack🔗). Imagine it like eating pancakes, where pancakes (functions) are added from the top and then eaten (processed) from the top down. The code is executed from top to bottom, pushing functions onto the execution stack, and when execution finishes, it exits.

Web API: The Asynchronous Helper Provided by the Browser

Common methods for handling asynchronous events, such as fetch, setTimeout, and addEventListener, are provided by the Web API. The callback functions that are passed into these methods will be handled by the Web API, allowing the Call Stack to be cleared quickly to process the next event without blocking JavaScript execution.

Callback Queue: The Waiting Line for Entry

After the Web API handles the event, it doesn’t return to the Call Stack immediately. Instead, it gets placed in the Callback Queue to wait. This also causes methods like setTimeout or setInterval to not be executed “exactly” within the described time. Instead, they will simply be added to the Callback Queue after the descriptive time.

Event Loop: Connecting the Whole Process

So how do the items in the Callback Queue get executed? That’s when the Event Loop comes into play. It has only one function: “to connect the Callback Queue with the Call Stack.” Specifically, when the Call Stack is empty, the first item from the Callback Queue will be placed into the Call Stack.

Conclusion

I hope that after viewing these simple animations, you can more intuitively and quickly understand what really happens behind asynchronous JavaScript.

References