JavaScript事件循环详解（生动形象的可视化图解）

声明：本文转载并翻译自 dev 上 Lydia Hallie 小姐姐的文章，文章写得非常精彩，Lydia Hallie 也同意将这篇文章翻译成中文，用来帮助更多开发者。

作者：Lydia Hallie

翻译：谷歌翻译

原文链接：https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

哦，事件循环。这是每个 JavaScript 开发人员都必须以一种或另一种方式处理的事情之一，但起初理解起来可能有点混乱。我是一个视觉学习者，所以我想我会尝试通过低分辨率 gif 以视觉方式解释它来帮助你，因为现在是 2019 年，gif 不知何故仍然像素化和模糊。

但首先，什么是事件循环，为什么要关心？

JavaScript 是单线程的：一次只能运行一个任务。通常这没什么大不了的，但是现在假设您正在运行一个需要 30 秒的任务… 是的… 在该任务期间，我们等待 30 秒，然后才能发生其他任何事情（JavaScript 默认在浏览器的主线程上运行，所以整个 UI 都卡住了）😬 现在是 2019 年，没有人想要一个缓慢、无响应的网站。

幸运的是，浏览器为我们提供了 JavaScript 引擎本身不提供的一些功能：Web API。这包括 DOM API、setTimeoutHTTP 请求等。这可以帮助我们创建一些异步的、非阻塞的行为🚀

当我们调用一个函数时，它会被添加到调用堆栈中。调用堆栈是 JS 引擎的一部分，这不是特定于浏览器的。这是一个堆栈，这意味着它是先进后出的（想想一堆煎饼）。当一个函数返回一个值时，它会从堆栈中弹出👋

该respond函数返回一个setTimeout函数。由setTimeoutWeb API 提供给我们：它让我们可以在不阻塞主线程的情况下延迟任务。我们传递给函数的回调函数，setTimeout箭头函数() => { return '``Hey``'} 被添加到 Web API。与此同时，setTimeout函数和响应函数从堆栈中弹出，它们都返回了它们的值！

在 Web API 中，计时器的运行时间与我们传递给它的第二个参数一样长，即 1000 毫秒。回调不会立即添加到调用堆栈，而是传递给称为队列的东西。

这可能是一个令人困惑的部分：这并不意味着回调函数在 1000 毫秒后被添加到调用堆栈（因此返回一个值）！它只是在 1000 毫秒后被添加到*队列中。*但这是一个队列，函数必须等待轮到它！

现在这是我们一直在等待的部分……是时候让事件循环完成它的唯一任务：将队列与调用堆栈连接起来！如果调用堆栈是空的，那么如果所有先前调用的函数都返回了它们的值并且已经从堆栈中弹出，那么队列中的第一项将被添加到调用堆栈中。在这种情况下，没有调用其他函数，这意味着当回调函数成为队列中的第一项时，调用堆栈为空。

回调被添加到调用堆栈，被调用，并返回一个值，然后从堆栈中弹出。

阅读一篇文章很有趣，但你只有通过一遍又一遍地实际使用它才能完全适应它。如果我们运行以下命令，请尝试找出记录到控制台的内容：

const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");

bar();
foo();
baz();

知道了？让我们快速看一下在浏览器中运行这段代码时发生了什么：

1. 我们调用bar. bar返回一个setTimeout函数。
2. 我们传递给的回调setTimeout被添加到 Web API、setTimeout函数并bar从调用堆栈中弹出。
3. 计时器运行，同时foo被调用并记录First。foo返回（未定义），baz被调用，回调被添加到队列中。
4. baz日志Third。事件循环在baz返回后看到调用堆栈为空，之后回调被添加到调用堆栈中。
5. 回调日志Second。