事件循环（Event Loop）是所有 JavaScript 开发者无论如何都要搞定的知识点之一，然而对于初学者来说，最后了解起来可能会有点艰难。本文通过低分辨率的 gif 图像，以可视化的模式直观地解说事件循环的机制。
首先咱们来看看，事件循环是什么？为什么咱们应该关注它呢？
咱们晓得，JavaScript 是 单线程的，也就是说，一次只能执行一个 JavaScript 工作。个别状况下，这不是什么大问题。不过，请想像一下，如果咱们正在执行一个耗时 30 秒的工作，在此工作期间，咱们得期待 30 秒能力进行其它任何操作（默认状况下，JavaScript 在浏览器的主线程上执行，所以整个用户界面都停滞了）。当初是 2020 年了，没人想要一个速度慢、反应迟钝的网站。
好在浏览器提供了一些 JavaScript 引擎自身没有提供的性能：Web API。它包含 DOM API、setTimeout()、HTTP 申请等等。这些 API 能够帮忙咱们创立一些异步的、非阻塞的行为。
当咱们调用一个函数时，该函数就被增加到调用栈（Call Stack）中。调用栈是 JavaScript 引擎的一部分，并非浏览器特有的。调用栈的“栈”，意味着它是先进后出（FILO）。当函数返回一个值时，该函数就会从栈中弹出。
在上图的 JavaScript 代码中，respond()函数返回一个 setTimeout() 函数。setTimeout()是由 Web API 提供给咱们的：它让咱们能够提早执行一项工作，而不会阻塞主线程。咱们传给 setTimeout() 函数的回调函数（即箭头函数 () => { return 'Hey'}）被增加到 Web API 中。同时，setTimeout() 函数和 respond() 函数从栈中弹出，因为它们都返回了它们的值！
在 Web API 中，定时器运行的工夫与咱们传给它的第二个参数一样长，即 1000 微秒。回调函数不会马上被增加到调用栈中，而是会传给队列。
这里就是最容易搞混的中央！请留神：回调函数并非是在 1000 毫秒后被增加到调用栈（从而返回一个值），而是在 1000 毫秒后被增加到 队列 中！既然是一个队列，函数就得排队，等着轮到它执行！
当初到了咱们期待已久的局部：该事件循环出场了。事件循环只做一项工作：将队列与调用栈连起来 ！如果调用栈是 空的 ，也就意味着之前所有被调用的函数都返回了它们的值，并且都曾经从栈中弹出，那么队列中的 第一项 就会被增加到调用栈中。在本例中，没有其余函数被调用，这意味着当回调函数成为队列中的第一项时，调用栈是空的。
回调函数被增加到调用栈，被调用，并返回一个值，并从栈中弹出。
读一篇文章倒是很爽，不过只有重复实际，咱们才会彻底把握。OK，咱们来看看如果执行上面这段代码，管制台上会输入什么：
const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");
bar();
foo();
baz();搞定了吗？上面咱们疾速看看在浏览器中执行这段代码时会产生什么：
- 首先咱们调用
bar()。bar()返回一个setTimeout()函数。 - 咱们传给
setTimeout()的回调被增加到 Web API，setTimeout()函数和bar()从调用栈中弹出。 - 定时器执行，同时
foo()被调用，输入First。foo()返回（undefined），baz()被调用，回调函数被增加到队列。 baz()输入Third。在baz()被返回后，事件循环看到调用栈是空的，之后回调函数被增加到调用栈。- 回调函数输入
Second。
心愿本文能让你在了解 JavaScript 事件循环机制的时候略微难受点！如果还有点困惑，不要放心，最重要的是去了解某个谬误或者行为可能来自何处，这样就能高效地用正确的术语在搜索引擎查找，最初在 Stack Overflow 页面上找到正确答案。
原文 by Lydia Hallie：https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
本文由博客一文多发平台 OpenWrite 公布！