How JavaScript Works? - Event Loop

JavaScript is a single-threaded language, which means it can only execute one task at a time. The event loop is a crucial part of how JavaScript works behind the scenes, allowing for asynchronous programming and preventing the browser from becoming unresponsive.

What is the Event Loop?

The event loop is a loop that continually checks for new events in the JavaScript runtime's event queue. When an event is detected, the event loop retrieves it from the queue and executes the associated callback function. This process continues until there are no more events left in the queue.

In other words, the event loop is responsible for processing all the asynchronous code in JavaScript, including callbacks, promises, and async/await functions.

How Does the Event Loop Work?

The event loop has two main components: the call stack and the event queue.

Call Stack

The call stack is a data structure that keeps track of the currently executing function. Whenever a new function is called, it is added to the top of the call stack. When a function completes execution, it is removed from the call stack.

Event Queue

The event queue is a data structure that holds all the events waiting to be processed by the event loop. Each event in the queue is associated with a callback function that will be executed when the event is processed.

When an event is triggered (such as a click event), its associated callback function is added to the event queue. If the call stack is empty, the event loop retrieves the first event from the queue and adds its callback function to the call stack.

If the call stack is not empty, the event loop waits until it is empty before retrieving the next event from the queue. This ensures that the currently executing function is allowed to complete before any new functions are added to the call stack.

Example Code

Here's an example of how the event loop works in practice:

---------------------

------------- -- -
  -------------------- -----------
-- ---

------------------------- -- -
  -------------------- -----------
---

-------------------

In this example, we have a console.log statement at the beginning and end of our code to indicate when the script starts and ends executing. In between those statements are three asynchronous functions:

setTimeout with a delay of 0, which means it will be executed as soon as possible.
A promise that resolves immediately using Promise.resolve.
Another console.log statement.

When we run this code, the output in the console will be:

-----
---
------- --------
------- --------

This output may seem surprising at first because the setTimeout callback was expected to be executed first. However, because of the event loop's behavior, the Promise callback is handled before the setTimeout callback.

Conclusion

Understanding how the event loop works is essential for writing efficient and reliable JavaScript code. By knowing how the call stack and event queue work together, you can write asynchronous code that avoids common pitfalls like callback hell and ensures that your application remains responsive and performant.

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6612

How JavaScript Works？—— Event Loop