javascript图解之Event Loop

哦，事件循环。这是每个JavaScript开发人员都必须以某种方式学习和理解的概念，但是起初理解起来可能有些混乱。我是一个视觉学习者，所以我想我会尝试通过低分辨率gif的可视化方式来帮助您。

但是首先，事件循环是什么，我们为什么要关注它呢？

JavaScript是单线程的：一次只能运行一个任务。通常，这没什么大不了的，但是现在想象您正在运行一个耗时30秒的任务。是的。在此任务中，我们等待30秒才能进行其他任何操作（默认情况下，JavaScript在浏览器的主线程上运行，因此整个用户界面都停滞了）😬都到了2019年了，没有人想要访问一个速度慢，反应迟钝的网站。

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

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

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

在Web API中，计时器的运行时间与我们传递给它的第二个参数1000ms一样长。回调不会立即添加到调用堆栈中，而是会传递给称为队列（类似于排队，先进先出）的数据结构。

这可能是一个令人困惑的部分：这并不意味着在1000毫秒后将回调函数添加到调用堆栈中（从而返回一个值）！它只是在1000毫秒后添加到队列中。但这是一个队列，该功能必须等待轮到它！（也就是说他并不是等了1000ms就可以执行了，而是等了1000ms才取到号开始排队）。

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

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

---

阅读一篇文章很有趣，但是通过反复地实际操作，您只会对此完全感到满意。如果运行以下命令，请尝试找出登录到控制台的内容：

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

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

 

得到它了？让我们快速看一下在浏览器中运行此代码时发生的情况：

1. bar被调用，返回setTimeout的调用；
2. 传入setTimeout的回调被传递给Web API处理，setTimeout执行完毕出栈，bar执行完毕出栈；
3. 定时器开始运行，同时主线程中foo被调用，打印First，foo执行完毕出栈；
4. baz被调用，打印Third，baz执行完毕出栈；
5. 500ms后定时器运行完毕，回调函数被放入任务队列中等待执行栈的调用；
6. Event Loop检测到调用栈为空，从任务队列中取出回调函数放入调用栈；
7. 回调函数被执行，打印Second，执行完毕出栈。

---

希望这会使您对事件循环感到更舒服！不必担心它是否仍然令人困惑，最重要的是了解某些错误/行为可能从何而来，