浅谈 JS 事件循环 (Event Loop)

注: 文章参考自浅析 JS 中的 EventLoop 事件循环（新手向）

概念

JavaScript 是一门单线程语言, 即同一时间只能执行一个任务, 也就是说代码执行是同步并且阻塞的

只能同步执行肯定是有问题的, 所以 JS 有了一个用来实现异步的函数：setTimeout

队列 (Queue)

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

好比我们生活中排队买东西, 前面的人肯定比后面的人优先购买

栈（Stack）

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

比如我们往盒子里放东西, 先放的在底部, 后放的在顶部, 所以后放的会先被拿出来

调用栈 (Call Stack)

调用栈里面放的是一个个待执行函数, Event Loop 会一直检查调用栈中是否有函数需要执行, 如果有, 就从栈顶依次执行
同时, 如果执行的过程中发现其他函数, 继续入栈然后执行

大致步骤如下:

• 栈空
• 现在执行到一个函数A, 函数A入栈
• 函数A又调用了函数B, 函数B入栈
• 函数B执行完后出栈
• 然后继续执行函数A, 执行完后A也出栈
• 栈空

这个调用栈其实大家经常会见到, 就是在控制台报错的时候, 错误信息显示的就是当前调用栈的状态

但是, 上面我们讨论的其实都是同步代码, 代码在运行的时候只用调用栈解释就可以了

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

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

事件表格 (Event Table)

可以理解成一张 事件=>回调函数 对应表

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

事件队列 (Event Queue)

简单理解就是 回调函数 队列，所以它也叫回调队列 (Callback Queue)

事件循环 (Event Loop)

先来看一个流程图:

• 任务先进入调用栈
• 同步任务直接在栈中等待被执行; 异步任务从调用栈移入到事件表格注册
• 当对应的事件触发 (或延迟到指定时间), 事件表格会将事件回调函数移入事件队列等待
• 当调用栈中没有任务时, 就从事件队列中拿出一个任务放入调用栈

而 事件循环 (Event Loop) 指的就是这一整个流程

它不停检查调用栈中是否有任务 (栈帧) 需要执行. 如果没有, 就检查事件队列, 从中弹出一个任务放入调用栈中