👻 Event Loop Intro

Introduction 🧟

This article is a light-hearted spin on Tania Rascia's event loop article for halloween. Make sure to check out her full article: Understanding the Event Loop, Callbacks, Promises, and Async/Await in JavaScript.

The Main Thread

Before we jump into the basic concepts of the event loop, the first thing you should understand is:

You'll often hear this referenced throughout the web as the 'Main Thread'. In JavaScript, we can't spin up additional threads that run in parallel to help out with the computation cost of your code across multiple CPU cores. With a single threaded model, you need to be careful not to block the main thread.

What do I mean by block the main thread? Well, UI interactions are handled on the same thread. If a synchronous task takes 10 seconds on the main thread, the user won't be able to interact with your site during this time, which isn't a very pleasant experience.

For me, the nice thing about a single threaded model is not having to worry about concurrency across multiple threads. In saying this, it would be pretty neat to spin up another thread for long client side computations without impacting the users interactions on your site. So how do we get around this problem?

I'm not going to cover the topic completely in this article, but Web Workers as a Web API makes it possible to:

Handling Asynchronous Tasks

When we click a button on the UI that performs an action like requesting data from an API:

Now that we have an insight into the execution model, here's the spooky synchronous execution below, where each operation runs synchronously one after another, processing one statement at a time.

1const changeEmojiDisplay = (type = 'show') => {
2    console.log('2');
3    const elements = document.getElementsByClassName('spooky-emoji');
4    for (let element of elements) {
5      console.log('(3) change element className');
6      element.className = `spooky-emoji spooky-emoji--${type}`;
7    }
8  };
9  
10  const changeTextDisplay = (type = 'show') => {
11    console.log('5');
12    const elements = document.getElementsByClassName('spooky-text');
13    for (let element of elements) {
14      console.log('(6) change element className');
15      element.className = `spooky-text spooky-text--${type}`;
16    }
17  };
18  
19  const start = () => {
20    console.log('1');
21    changeEmojiDisplay(); 
22    console.log('4');
23    changeTextDisplay(); 
24    console.log('7');
25  };
26  
27  const reset = () => {
28    changeEmojiDisplay('hide');
29    changeTextDisplay('hide');  
30  }

1const changeEmojiDisplayAsync = (type = 'show') => {
2    console.log('2');
3    const elements = document.getElementsByClassName('spooky-emoji-async');
4    for (let element of elements) {
5      setTimeout(() => {
6        console.log('(3) change element className');
7        element.className = `spooky-emoji-async spooky-emoji-async--${type}`;
8      }, 2000);
9    }
10  };
11  
12  const changeTextDisplayAsync = (type = 'show') => {
13    console.log('5');
14    const elements = document.getElementsByClassName('spooky-text-async');
15    for (let element of elements) {
16      setTimeout(() => {
17        console.log('(6) change element className');
18        element.className = `spooky-text-async spooky-text-async--${type}`;
19      }, 0);
20    }
21  };
22  
23  const startAsync = () => {
24    console.log('1');
25    changeEmojiDisplayAsync();
26    console.log('4');
27    changeTextDisplayAsync();
28    console.log('7');
29  };
30  
31  const resetAsync = () => {
32    changeEmojiDisplayAsync('hide');
33    changeTextDisplayAsync('hide');
34  };

Understanding Execution

One thing you'll notice when looking at the code above is the setTimeout added with a value of 0. Developers new in the JavaScript space might assume this executes the anonymous function inside it immediately at 0 seconds, but we know thats not the case! If you're checking this article out on desktop, make sure to pop open the developer tools and navigate to the console to see the log order happen as you interact with the start and refresh buttons. Did you notice how '7' logs before '6'?

With this in mind, alongside seeing a synchronous and asynchronous example, we're ready to take a look at the importance roles the stack and queue play in the event loop to ensure the main thread runs smoothly.

Final Thoughts

That's it for this article, make sure to check out the video below to see a visual representation of the event loop and set timeouts in action.