从VIP到普通人：理解Event Loop在JavaScript中的运作

2023-11-17 05:22:17







**VIP 还是普通人？Event Loop 里的 JavaScript** 

作为一家餐厅的老板，你每天都要面对形形色色的顾客。有的顾客是 VIP，有的则是普通人。VIP 顾客当然有特殊的待遇，比如不用排队就能点餐，服务员会优先给他们上菜。普通人就只能乖乖排队，等轮到他们的时候才能点餐。

JavaScript 中的 Event Loop 也类似于餐厅里的服务员，它负责处理各种事件和任务。不过，Event Loop 可不是只服务 VIP 顾客，它会公平地对待所有事件和任务，先到先得。

**事件队列、消息队列和任务队列：傻傻分不清楚？** 

在 Event Loop 中，有三个队列：事件队列、消息队列和任务队列。它们就像是餐厅里的三个窗口，每个窗口都有自己的服务员。

* 事件队列：这个队列里存放着所有即将发生的事件，比如鼠标点击事件、键盘输入事件、定时器事件等。
* 消息队列：这个队列里存放着所有需要被处理的消息，比如来自其他线程的消息、来自浏览器的消息等。
* 任务队列：这个队列里存放着所有需要执行的任务，比如 JavaScript 代码、AJAX 请求等。

**Event Loop 如何处理事件和任务** 

Event Loop 会不断地从事件队列中取出事件，然后交给消息队列。消息队列再把这些事件交给任务队列，由任务队列中的服务员执行。

如果任务队列中的任务执行完毕，Event Loop 会再从事件队列中取出下一个事件，交给消息队列，以此类推。

**示例代码** 

```javascript
// 一个定时器事件
setTimeout(() => {
  console.log('定时器事件');
}, 1000);

// 一个鼠标点击事件
document.addEventListener('click', () => {
  console.log('鼠标点击事件');
});

// 一个 AJAX 请求
fetch('https://example.com/api/data')
  .then(response => response.json())
  .then(data => console.log(data));