浅析 JS 中的 EventLoop 事件循环（新手向）

序

Event Loop 这个概念相信你们或多或少都了解过，可是有一次被一个小伙伴问到它具体的原理的时候，感受本身只知道个大概印象，因而计划着写一篇文章，用输出倒逼输入，让本身从新学习这个概念，同时也能帮助更多的人理解它~

概念

JavaScript 是一门 单线程 语言，即同一时间只能执行一个任务，即代码执行是同步而且阻塞的。

eg. 这就像只有一个窗口的银行，客户须要一个一个排队办理业务。

只能同步执行确定是有问题的，因此 JS 有了一个用来实现异步的函数：setTimeout

下面要讲的 Event Loop 就是为了确保 异步代码 能够在 同步代码 执行后继续执行的。

因为涉及到的相关概念较多，咱们先从最简单的来。

队列（Queue）

队列 是一种 FIFO(First In, First Out) 的数据结构，它的特色就是 先进先出

eg. 生活中最多见的例子就是排队啦，排在队伍最前面的人最早被提供服务。

栈（Stack）

栈 是一种 LIFO（Last In, First Out）的数据结构，特色即 后进先出。

eg. 你们都吃过桶装薯片吧~薯片在包装的时候只能从顶部放入，而吃的时候也只能从顶部拿出，这就叫后进先出哈

调用栈（Call Stack）

栈咱们已经知道了，那么什么是 调用栈 呢 ？

它本质上固然仍是个栈啦 废话，关键在于它里面装的东西，是一个个待执行的函数。

Event Loop 会一直检查 Call Stack 中是否有函数须要执行，若是有，就从栈顶依次执行。同时，若是执行的过程当中发现其余函数，继续入栈而后执行。

先拿两个函数来讲：

• 栈空
• 如今执行到一个 函数A，函数A 入栈
• 函数A 又调用了 函数B，函数B 入栈
• 函数B 执行完后 出栈
• 而后继续执行 函数A，执行完后A也 出栈
• 栈空

更复杂一点的话，来看一段代码：

这段代码在 调用栈中的运行顺序以下图：

这个调用栈其实你们常常会见到，就是在控制台报错的时候，错误信息显示的就是当前时刻调用栈的状态。

But, 上面咱们讨论的其实都是同步代码，代码在运行的时候只用 调用栈 解释就能够了。

那么，假如咱们发起了一个网络请求(request)，或者设置了一个定时器延时(setTimeout)，一段时间后的代码（回调函数）确定不是直接被加到调用栈吧？

这时就要引出 事件表格（Event Table） 和 事件队列 (Event Queue) 了

Event Table

Event Table 能够理解成一张 事件->回调函数 对应表

它就是用来存储 JavaScript 中的异步事件 (request, setTimeout, IO等) 及其对应的回调函数的列表

Event Queue

Event Queue 简单理解就是 回调函数 队列，因此它也叫 Callback Queue

当 Event Table 中的事件被触发，事件对应的 回调函数 就会被 push 进这个 Event Queue，而后等待被执行

Event Loop

先来看一个流程图：

• 开始，任务先进入 Call Stack
• 同步任务直接在栈中等待被执行，异步任务从 Call Stack 移入到 Event Table 注册
• 当对应的事件触发（或延迟到指定时间），Event Table 会将事件回调函数移入 Event Queue 等待
• 当 Call Stack 中没有任务，就从 Event Queue 中拿出一个任务放入 Call Stack

而 Event Loop 指的就是这一整个圈圈：

它不停检查 Call Stack 中是否有任务（也叫栈帧）须要执行，若是没有，就检查 Event Queue，从中弹出一个任务，放入 Call Stack 中，如此往复循环。

---

好啦，不知道有没有看明白呢？放一张更经典的图：

其中与 Event Queue 对应的还有一个叫 Job Queue，它主要是用来执行 Promise 的，这两种 Queue 有什么区别呢？

这就涉及到 宏任务 (macro task) 和 微任务 (micro task) 了，咱们放在下篇再讲~

参考文章

原文连接
MDN EventLoop
javascript-event-loop
understanding-js-the-event-loop
这一次，完全弄懂JavaScript执行机制
understanding-event-loop-call-stack-event-job-queue-in-javascript

欢迎关注个人公众号：码力全开