你可能不知道的 JavaScript Event Loop

一、最初理解的 Event Loop

实际上，谈到任务队列，绝大多数人第一反应就是 同步任务/异步任务、宏任务/微任务，在很多博客和帖子中也有详细的说明。在看了 winter 老师在极客时间《重学前端》这门课，发现自己对 Event Loop 了解的不够深入，是从一道题目开始：

// 写出输出顺序
function sleep(duration) {
        return new Promise(function(resolve, reject) {
            console.log("b");
            setTimeout(resolve,duration);
        })
}
console.log("a");
sleep(5000).then(()=>console.log("c"));
复制代码

好的，这道题看上去非常简单，绝大多数人都会得出这样一个事件执行顺序（同步 -> 微任务 -> 宏任务）：

script start -> Promise 立即执行函数 -> Promise then 函数 -> setTimeout

从而写出了这样的一个答案：

1. a // 同步执行
2. b // Promise内部立即执行函数（同步）
3. c // 异步任务（微任务， 异步执行）
复制代码

实际上，虽然答案是正确的，但是这是个错误的执行顺序，正确的执行顺序是：

script start -> Promise 立即执行函数 -> setTimeout -> Promise then 函数

amazing! 为什么在宏任务执行之后，还会有微任务执行？不急，仔细往下看。

二、真实的 Event Loop

JavaScript 语言的一大特点就是单线程，需要执行多个任务总要有一定的规则限制执行的先后顺序，而这个规则就是我们的 Event Loop 机制，在 node 中我们可以称之为事件循环。

直接上图再次了解一下事件循环：

image.png

可以看到 Macro Task（宏任务）和 Micro Task（微任务）并不像我们想象的那样，实际上是包含关系，也可以理解成，一个宏任务包含一个微任务队列。

这样我们就能总结出解决事件循环问题的一般步骤：

1. 确定宏任务数量；
2. 确定宏任务中微任务的数量和调用次序；
3. 确定宏任务的调用次序；

再回头看上面那道题，是不是很清晰：

1. 同步执行 console.log("a");
2. 同步执行 console.log("b");
3. setTimeout “进入”宏任务队列;
4. 由于 Promise 没调用 resolve(), script 宏任务不存在微任务，执行完成;
5. setTimeout 宏任务执行, resolve 被调用，then 函数进入微任务队列;
6. 执行 Promise then 函数，console.log("c");

三、举一反三

实际上，Event Loop 是前端同学面试的时候必过的一关，也属于非常基础的内容了，单实际上只是简单理解，如果Event Loop 和 Promise 等知识结合，从百度一搜，往往会搜到很多看起来令人“头大”的面试题：

// 写出输出顺序
async function async1() {
        console.log('async1');
}
async function async2() {
        console.log('async2 start');
        await async1();
        console.log('async2 end');
}
console.log('start');
setTimeout(function() {
        console.log('setTimeout');
}, 0);
async2();
new Promise(function(resolve) {
        console.log('promise1');
        resolve();
}).then(function() {
        console.log('promise2');
});
console.log('end’);
复制代码

实际上，结合之前提到的规律，我们完全可以做出以下归纳：

1. 确定宏任务数量（2个）
2. 确定宏任务中微任务的数量和调用次序（script: ['async2 end', 'promise2'], setTimeout: []）
3. 确定宏任务的调用次序（script -> setTimeout）

可以得到如下题解：

1. 同步执行 console.log('start')/console.log('async2 start')/console.log('async1')/console.log('promise1')/console.log('end’);
2. 执行微任务队列 console.log('async2 end')/console.log('promise2');
3. 执行 setTimeout console.log('setTimeout');
4. setTimeout 没有微任务，结束。

当然，本题还涉及 Async/Await 的知识，建议大家详细了解下阮一峰老师的《ES6入门教程》es6.ruanyifeng.com/#docs/async

四、总结

工作中遇到这种问题，才发现自己之前学的路子有很野，实际上工作中完全触碰不到这里的知识，总结就是深入思考才能从原理了解知识。

五、参考

1. 《重学前端》time.geekbang.org/column/intr…
2. 《Tasks, microtasks, queues and schedules》jakearchibald.com/2015/tasks-…
3. 《JavaScript 运行机制详解：再谈Event Loop》www.ruanyifeng.com/blog/2014/1…