高级 JavaScript：探索事件循环

介绍

javascript 是一种在 web 开发中强大且广泛使用的编程语言。它最有趣的方面之一是它的并发模型，尽管它是单线程的，但它允许它有效地处理多个任务。了解事件循环对于编写高性能且无错误的 javascript 代码至关重要，尤其是在复杂的应用程序中。

理解 javascript 的并发模型

单线程性质

javascript 是单线程的，这意味着它按顺序执行代码，一次执行一个操作。这与多线程语言相反，多线程语言可以同时运行。然而，javascript 使用事件驱动的非阻塞架构来管理并发并有效地处理异步任务。

并发模型

javascript 使用基于事件循环的并发模型，这使得它能够执行非阻塞操作。该模型对于处理 i/o 操作、网络请求和用户交互等任务（无需冻结用户界面）至关重要。

事件循环解释

什么是事件循环？

事件循环是 javascript 用来协调代码执行、处理事件和管理异步任务的机制。它不断检查调用堆栈以查看是否有任何函数需要运行，并在堆栈为空时处理回调队列中的任务。

立即学习“Java免费学习笔记（深入）”；

事件循环的组成部分

1. 调用栈

调用堆栈跟踪函数调用。当一个函数被调用时，它被添加到堆栈中，当它完成时，它被删除。

例子：

function greet() {
  console.log('hello');
}

function saygoodbye() {
  console.log('goodbye');
}

greet();
saygoodbye();

• greet() 被调用并添加到堆栈中。
• console.log("hello") 被执行。
• greet() 已从堆栈中删除。
• saygoodbye() 被调用并添加到堆栈中。
• console.log("再见") 被执行。
• saygoodbye() 已从堆栈中删除。

2. web api

web api 由浏览器（或 node.js）提供，包括 settimeout、dom 事件、fetch 等功能。它们用于执行主执行线程之外的任务。

例子：

console.log('start');

settimeout(() => {
  console.log('timeout');
}, 1000);

console.log('end');

• console.log("start") 立即执行并记录。
• settimeout 被调用，其回调被发送到 web api 环境。
• console.log("end") 立即执行并记录。
• 1秒后，settimeout的回调被推送到回调队列。
• 一旦调用堆栈为空，事件循环将回调推送到堆栈，并执行 console.log("timeout")。

3.回调队列（任务队列）

回调队列保存带有要处理的回调的消息。事件循环从队列中取出任务，并在堆栈为空时将它们添加到调用堆栈中执行。

4. 微任务队列

微任务队列用于当前操作完成后需要立即运行的任务。承诺和突变观察者在这里处理。

console.log('Start');

setTimeout(() => {
  console.log('Timeout');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise');
});

console.log('End');

• console.log("start") 被执行并记录。
• settimeout回调以零延迟发送到回调队列。
• promise 被解析，并且其回调被添加到微任务队列中。
• console.log("end") 被执行并记录。
• 事件循环处理微任务队列并记录console.log("promise")。
• 处理回调队列，记录console.log("timeout")。