作者:Lydia Hallie
译者:前端小智
来源:dev
事件循环是什么,为什么要理解它?
JS 是单线程的:一次只能运行一个任务。通常这没什么大不了的,但现在想象一下我们正在运行一个需要30秒的任务。在这个任务中,我们要等待30秒,然后才能执行接下来要做的事情(JS 默认运行在浏览器的主线程上,所以整个UI都卡住了)。
幸运的是,浏览器提供了 JS 引擎本身没有提供的一些特性:Web API。这包括DOM API、setTimeout、HTTP请求等等。这些 API 可以帮助我们创建一些异步的、非阻塞的行为。
当我们调用一个函数时,它被添加到调用堆栈中。调用堆栈是JS引擎的一部分,这不是浏览器特有的。堆栈里面的顺序是先进后出,当函数返回一个值时,它会从堆栈中弹出。
![9596c2f165ba00eef032f5053aee9f17.gif](https://i-blog.csdnimg.cn/blog_migrate/061b99dbc3eff4532f9275473388df8a.gif)
response函数返回一个setTimeout函数。setTimeout是由Web API提供的:它允许我们在不阻塞主线程的情况下延迟任务。我们传递给setTimeout函数的回调函数()=> {return 'Hey'}被添加到Web API中。与此同时,setTimeout函数和response函数从堆栈中弹出,它们都返回了它们的值。
![34170043be09d16ffb341b4e5f31991c.gif](https://i-blog.csdnimg.cn/blog_migrate/88ad4b376c388180970a925ecd964264.gif)
在Web API中,计时器的运行时间与我们传递给它的第二个参数1000ms一样长。回调不会立即添加到调用堆栈中,而是会传递到队列中。
![03fc221e26e4a73f40ad62f92680915f.gif](https://i-blog.csdnimg.cn/blog_migrate/2a698e40fdfd6bbf6f6ef0b5286b36ab.gif)
这可能是一个令人困惑的部分:它并不意味着在1000ms之后将回调函数添加到调用堆栈中,它只是在1000ms后添加到队列中。在队列,函数必须等待轮到它,才会执行。
现在,我们一直在等待事件循环完成其惟一的任务:将队列与调用堆栈连接起来。如果调用堆栈为空,那么如果之前调用的所有函数都返回了它们的值并已从堆栈中弹出,则队列中的第一项将添加到调用堆栈中。在本例中,没有调用其他函数,这意味着在回调函数成为队列中的第一项时,调用堆栈为空。
![036bf7247ee9ee005587614dce9a034f.gif](https://i-blog.csdnimg.cn/blog_migrate/ce4c47c892641f91fe79d9d20d1f238d.gif)
回调函数被添加到调用堆栈中,被调用,并返回一个值,然后从堆栈中弹出。
![9500e830137cbe67b67b76f9c82b8f97.gif](https://i-blog.csdnimg.cn/blog_migrate/7eef39a118d65c16beacd57c84f78b52.gif)
通过动画演示看起来是很有趣的,但还是需要重复多看几遍,才能更好理解它们之间的关系。现在来考验一下,如下代码所示,请说出执行的结果:
const foo = () => console.log("First");const bar = () => setTimeout(() => console.log("Second"), 500);const baz = () => console.log("Third");bar();foo();baz();
明白了吗?让我们快速查看一下在浏览器中运行这段代码时发生了什么
![26a9b732c5ffde370f6b1d6916dbe738.gif](https://i-blog.csdnimg.cn/blog_migrate/189c54cd879636cdfca60728c90a17e6.gif)
1.调用函数bar,bar返回setTimeout函数。
2.我们传递给setTimeout的回调被添加到Web API,setTimeout函数和bar从调用栈中弹出。
3.计时器运行,同时函数foo被调用并打印 First。foo返回,接着调用函数baz,并将回调添加到队列中。
4.函数baz打印Third,事件循环看到baz返回后,调用栈为空,然后将处理队列中的回调添加到调用栈中。
- 回调函数打印 Second。
希望本文对你在事件循环上的理解有一定的帮助,咱们下篇见。
原文:https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif