了解 JavaScript 中的事件循环 — 变得简单！

JavaScript 是最流行的编程语言之一，为网络上90% 的网站提供支持！但是，最棘手和最容易被误解的概念之一是事件循环的工作原理。这是事件循环、任务队列、调用堆栈、微任务队列和 Web API 的简单解释。

JavaScript 有何特别之处？

JavaScript 是一种单线程语言。这意味着它一次处理一件事，与 C 或 Go 等语言不同，后者可以同时处理多个事情。为了使诸如获取数据或运行计时器之类的异步任务顺利进行，JavaScript 使用了称为 事件循环！

的东西

1. 什么是 Web API？

Web API 是浏览器或 Node.js 提供的额外工具，用于处理诸如发出网络请求（使用 fetch）、设置计时器（setTimeout）或访问用户位置（使用 地理定位 API）。这些任务在主 JavaScript 线程之外运行。

示例：

setTimeout(() => {
  console.log("Timer done!");
}, 2000);

在这里，浏览器处理计时器，同时主 JavaScript 继续运行其他代码。

2.什么是任务队列？

任务队列 是来自 Web API、事件侦听器和其他延迟操作的回调函数等待 JavaScript 准备好运行它们的地方。这些任务排队等候。

可以把它想象成商店里的排队队伍，当 JavaScript 完成当前任务时，每个任务都会由事件循环处理。

3.什么是调用栈？

调用堆栈 是 JavaScript 跟踪函数调用的地方。当你调用一个函数时，它会被压入堆栈。完成后，它就会弹出。 JavaScript 按照任务在堆栈中出现的顺序处理任务，它本质上是同步的。

4.什么是事件循环？

事件循环就像一名交通员，让一切保持运转。它不断检查调用堆栈是否为空，如果为空，则将任务从任务队列或微任务队列移动到堆栈中执行。这就是让 JavaScript 处理异步代码而不会阻塞主线程。

的原因

事件循环的实际示例

setTimeout(() => {
  console.log("2000ms");
}, 2000);

setTimeout(() => {
  console.log("100ms");
}, 100);

console.log("End");

这里发生了什么？

让我们来分解一下：

1. “End”会立即记录，因为它是同步的并且在调用堆栈中运行。
2. 100ms 的 setTimeout 由 Web API 处理。 100ms后，其回调移动到任务队列。
3. 2000ms 的 setTimeout 的作用是一样的，但是它的回调在 2000ms 后移动到 任务队列。
4. 事件循环首先将 100ms 回调移动到 调用堆栈，然后是 2000ms 回调。

5.什么是微任务队列？

微任务队列是一个特殊的队列，用于在任务队列之前处理的任务。微任务来自 Promises 或突变观察者之类的东西。事件循环始终在任务队列之前检查微任务队列。

带有 Promise 的微任务示例

console.log("Start");

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

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

console.log("End");

这里发生了什么？

1. “开始”立即被记录。
2. setTimeout回调被放置在任务队列中。
3. Promise 决议被放置在 微任务队列中。
4. “结束”已记录。
5. 事件循环检查微任务队列，执行Promise回调。
6. 最后任务队列处理setTimeout回调。

输出：

Start
End
Promise
Timeout

视觉表现

总结一切

以下是所有内容的组合方式：

1. Web API 处理异步任务，例如主线程之外的计时器。
2. 事件循环将任务从任务队列或微任务队列移动到调用堆栈。
3. 微任务（如承诺）首先处理，然后再处理任务队列中的任务。

以上是了解 JavaScript 中的事件循环 — 变得简单！的详细内容。更多信息请关注PHP中文网其他相关文章！