【动画演示】：事件循环 形象深动(JavaScript)

做者：Lydia Hallie
译者：前端小智
来源： dev

事件循环是什么，为何要理解它？

JS 是单线程的:一次只能运行一个任务。一般这没什么大不了的，但如今想象一下咱们正在运行一个须要30秒的任务。在这个任务中，咱们要等待30秒，而后才能执行接下来要作的事情(JS 默认运行在浏览器的主线程上，因此整个UI都卡住了)。

幸运的是，浏览器提供了 JS 引擎自己没有提供的一些特性:Web API。这包括DOM API、setTimeout、HTTP请求等等。这些 API 能够帮助咱们建立一些异步的、非阻塞的行为。

当咱们调用一个函数时，它被添加到调用堆栈中。调用堆栈是JS引擎的一部分，这不是浏览器特有的。堆栈里面的顺序是先进后出，当函数返回一个值时，它会从堆栈中弹出。

response函数返回一个setTimeout函数。setTimeout是由Web API提供的:它容许咱们在不阻塞主线程的状况下延迟任务。咱们传递给setTimeout函数的回调函数()=> {return 'Hey'}被添加到Web API中。与此同时，setTimeout函数和response函数从堆栈中弹出，它们都返回了它们的值。

在Web API中，计时器的运行时间与咱们传递给它的第二个参数1000ms同样长。 回调不会当即添加到调用堆栈中，而是会传递到队列中。

这多是一个使人困惑的部分:它并不意味着在1000ms以后将回调函数添加到调用堆栈中，它只是在1000ms后添加到队列中。在队列，函数必须等待轮到它，才会执行。

如今，咱们一直在等待事件循环完成其唯一的任务:将队列与调用堆栈链接起来。若是调用堆栈为空，那么若是以前调用的全部函数都返回了它们的值并已从堆栈中弹出，则队列中的第一项将添加到调用堆栈中。在本例中，没有调用其余函数，这意味着在回调函数成为队列中的第一项时，调用堆栈为空。

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

经过动画演示看起来是颇有趣的，但仍是须要重复多看几遍，才能更好理解它们之间的关系。如今来考验一下，以下代码所示，请说出执行的结果：

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。

但愿本文对你在事件循环上的理解有必定的帮助，我们下篇见。

---

原文：https://dev.to/lydiahallie/ja...

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

---

交流

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

https://github.com/qq44924588...

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。