前言
大家好，我是林三心，有关于EventLoop的知识点，在平时是考的非常多的，其实也跟我们日常的工作时息息相关的，懂得EventLoop的执行顺序，可以大大帮助我们定位出问题出在哪。其实正常的EventLoop顺序是很容易分辨的，但是如果setTimeout + Promise + async/await联起手来是非常棘手的。今天我就带大家过五关斩六将，征服他们！！！
注明：本文不涉及 Nodejs 执行机制
同步 && 异步
什么是异步，什么是同步，我不多说，我就通过小故事来讲讲吧。
JS 执行机制
其实不难，JavaScript 代码执行机制，我就归结为三句话
请看以下例子
console.log(1) // 同步setTimeout(() => { console.log(2) // 异步}, 2000);console.log(3) // 同步setTimeout(() => { console.log(4) // 异步}, 0);console.log(5) // 同步
输出 ： 1 3 5 4 2
复制代码
宏任务 && 微任务
前面说了，等所有同步代码都执行完，再从事件队列里依次执行所有异步回调函数。
其实事件队列也是一个小团体，人家也有自己的规则，这就类似于学校管理着许多社团，人家自己社团内部也有人家自己的规矩。
话说回来，为什么事件队列里需要有自己的规则呢？要不你先想想为什么学校里的社团里要有自己的规则要分等级，是因为有的人能力强有的人能力弱，所以也就有了等级的高低。其实事件队列也一样，事件队列是用来存异步回调的，但是异步也分类型啊，异步任务分为宏任务和微任务，并且微任务执行时机先于宏任务
那宏任务和微任务都分别有哪些呢？
宏任务
微任务
执行流程
那就来说说整体的执行的流程吧
例子
大家可以根据我的解题步骤去走，基本 90%的题目都是没什么压力的！！！
1、标记区分异步和同步
2、异步中，标记区分宏任务和微任务
3、分轮数，一轮一轮慢慢走
console.log(1) // 同步setTimeout(() => { console.log(2) // 异步：宏任务});console.log(3) // 同步Promise.resolve().then(()=>{ // 异步：微任务 console.log(4) })console.log(5) // 同步
复制代码
第一轮
第二轮
说明：微任务先执行
输出：4
产生宏任务：无，产生微任务：无
剩余宏任务：setTimeout，剩余微任务：无
第三轮(结束)
说明：执行宏任务
输出：2
产生宏任务：无，产生微任务：无
剩余宏任务：无，剩余微任务：无
第一关
想一想我刚刚说的解题思路，大家可以按照那个思路来，这道题也就是分分钟的事情啦
console.log(1)setTimeout(() => { console.log(2) Promise.resolve().then(() => { console.log(3) })});console.log(4)new Promise((resolve,reject) => { console.log(5)}).then(() => { console.log(6) setTimeout(() => { console.log(7) })})console.log(8)
复制代码
第一步：标记
注意：Promise 的executor是同步的哦！！！
console.log(1) // 同步setTimeout(() => { console.log(2) // 异步：宏任务 setTimeout1 Promise.resolve().then(() => { // 异步：微任务 then1 console.log(3) })});console.log(4) // 同步new Promise((resolve,reject) => { console.log(5) // 同步 resolve()}).then(() => { // 异步：微任务 then2 console.log(6) setTimeout(() => { console.log(7) // 异步：宏任务 setTimeout2 })})console.log(8) // 同步
复制代码
第二步：分轮
第二关
大家在遇到Promise.then.then这种时，如果有点懵逼的同学，可以转换一下，下面会说到
注意：then方法会自动返回一个新的Promise，也就是return new Promise，具体的Promise源码，大家可以看我这篇看了就会，手写Promise原理，最通俗易懂的版本【阅读：1.1w，点赞：430】
setTimeout(() => { console.log(1)}, 0)console.log(2)const p = new Promise((resolve) => { console.log(3) resolve()}).then(() => { console.log(4)}).then(() => { console.log(5)})console.log(6)
复制代码
第一步：标记 + 转换
注意：这里的转换，只针对做题时，比较好理解，平时不要这么转换，平时这么转换是不太合适的，是错的
setTimeout(() => { // 异步：宏任务 setTimeout console.log(1)}, 0)console.log(2) // 同步const p = new Promise((resolve) => { // p 是 then1 执行返回的新 Promise console.log(3) // 同步 resolve()}).then(() => { // 异步：微任务 then1 console.log(4) // 拿着 p 重新 then p.then(() => { // 异步：微任务 then2 console.log(5) })})console.log(6) // 同步 6
复制代码
第二步：分轮
第三关
再说一遍：大家在遇到Promise.then.then这种时，如果有点懵逼的同学，可以转换一下
注意：then方法会自动返回一个新的Promise，也就是return new Promise，具体的Promise源码，大家可以看我这篇看了就会，手写Promise原理，最通俗易懂的版本【阅读：1.1w，点赞：430】
new Promise((resolve,reject)=>{ console.log(1) resolve()}).then(()=>{ console.log(2) new Promise((resolve,reject)=>{ console.log(3) resolve() }).then(()=>{ console.log(4) }).then(()=>{ console.log(5) })}).then(()=>{ console.log(6)})
复制代码
第一步：标记 + 转换
注意：这里的转换，只针对做题时，比较好理解，平时不要这么转换，平时这么转换是不太合适的，是错的
const p1 = new Promise((resolve, reject) => { // p1 是 then1 执行返回的新 Promise console.log(1) // 同步 resolve()}).then(() => { // 异步：微任务 then1 console.log(2) const p2 = new Promise((resolve, reject) => { // p2 是 then2 执行返回的新 Promise console.log(3) // then1 里的 同步 resolve() }).then(() => { // 异步：微任务 then2 console.log(4) // 拿着 p2 重新 then p2.then(() => { // 异步：微任务 then3 console.log(5) }) }) // 拿着 p1 重新 then p1.then(() => { // 异步：微任务 then4 console.log(6) })})
复制代码
第二步：分轮
第四关
这一关，比上一关多了一个return
前面说了，then方法会自动返回一个新的Promise，相当于return new Promise，但是如果你手动写了return Promise，那return的就是你手动写的这个Promise
new Promise((resolve, reject) => { console.log(1) resolve()}).then(() => { console.log(2) // 多了个return return new Promise((resolve, reject) => { console.log(3) resolve() }).then(() => { console.log(4) }).then(() => { // 相当于return了这个then的执行返回Promise console.log(5) })}).then(() => { console.log(6)})
复制代码
第一步：标记 + 转换
由于return的是then3执行返回的Promise，所以then4其实是then3Promise.then()，所以可转换为then3.then4
new Promise((resolve, reject) => { console.log(1) // 同步 resolve()}).then(() => { // 异步：微任务 then1 console.log(2) // then1 中的 同步 new Promise((resolve, reject) => { console.log(3) // then1 中的 同步 resolve() }).then(() => { // 异步：微任务 then2 console.log(4) }).then(() => { // 异步：微任务 then3 console.log(5) }).then(() => { // 异步：微任务 then4 console.log(6) })})
复制代码
第二步：分轮
第五关
new Promise((resolve, reject) => { console.log(1) resolve()}).then(() => { console.log(2) new Promise((resolve, reject) => { console.log(3) resolve() }).then(() => { console.log(4) }).then(() => { console.log(5) })}).then(() => { console.log(6)})new Promise((resolve, reject) => { console.log(7) resolve()}).then(() => { console.log(8)})
复制代码
第一步：标记 + 转换
const p1 = new Promise((resolve, reject) => { // p1 是 then1 执行返回的新 Promise console.log(1) // 同步 resolve()}).then(() => { // 异步：微任务 then1 console.log(2) const p2 = new Promise((resolve, reject) => { // p2 是 then2 执行返回的新 Promise console.log(3) // then1 里的 同步 resolve() }).then(() => { // 异步：微任务 then2 console.log(4) // 拿着 p2 重新 then p2.then(() => { // 异步：微任务 then3 console.log(5) }) }) // 拿着 p1 重新 then p1.then(() => { // 异步：微任务 then4 console.log(6) })})
new Promise((resolve, reject) => { console.log(7) // 同步 resolve()}).then(() => { // 异步：微任务 then5 console.log(8)})
复制代码
第二步：分轮
第六关
其实async/await的内部实现原理，是依赖于Promise.prototype.then的不断嵌套，它在题中也是可以转换的，下面会讲到。
有兴趣的朋友可以看我这篇7张图，20分钟就能搞定的async/await原理！为什么要拖那么久【阅读量：1.8w，点赞：571】
async function async1() { console.log(1); await async2(); console.log(2);}async function async2() { console.log(3);}console.log(4);setTimeout(function () { console.log(5);});async1()new Promise(function (resolve, reject) { console.log(6); resolve();}).then(function () { console.log(7);});console.log(8);
复制代码
第一步：标记 + 转换
注意：这里的转换，只针对做题时，比较好理解，平时不要这么转换，平时这么转换是不太合适的
console.log(4); // 同步setTimeout(function () { console.log(5); // 异步：宏任务 setTimeout});
// async1函数可转换成console.log(1) // 同步new Promise((resolve, reject) => { console.log(3) // 同步 resolve()}).then(() => { // 异步：微任务 then1 console.log(2)})// async1函数结束
new Promise(function (resolve, reject) { console.log(6); // 同步 resolve();}).then(function () { // 异步：微任务 then2 console.log(7);});console.log(8); // 同步
复制代码
第二步：分轮
课后作业
最后给大家布置两道作业，帮大家巩固一下本文章所学的知识，大家也可以加入我的摸鱼群，进行答案的讨论。进群点击这里进群，目前已有将近1000人加入学习，我会定时举办学习分享，模拟面试等学习活动，一起学习，共同进步！！！
第一题（思考题）
想一想下面这两个有什么区别？
// 第一种const p = new Promise((resolve, reject) => { resolve()}).then(() => console.log(1)).then(() => console.log(2))
// 第二种const p = new Promise((resolve, reject) => { resolve()})p.then(() => console.log(1))p.then(() => console.log(2))
复制代码
第二题（问题不大）
async function async1() { console.log(1); await async2(); console.log(2);}async function async2() { console.log(3);}
new Promise((resolve, reject) => { setTimeout(() => { resolve() console.log(4) }, 1000);}).then(() => { console.log(5) new Promise((resolve, reject) => { setTimeout(() => { async1() resolve() console.log(6) }, 1000) }).then(() => { console.log(7) }).then(() => { console.log(8) })}).then(() => { console.log(9)})new Promise((resolve, reject) => { console.log(10) setTimeout(() => { resolve() console.log(11) }, 3000);}).then(() => { console.log(12)})
复制代码
第三题（有点难度）
这道题能一分钟内做出来的找我领奖，这道题需要具备一定的Promise原理基础 + async/await原理基础才能比较轻松的答对，有兴趣的同学可以看我之前写过的文章
async function async1() { console.log('async1 start') await async2() console.log('async1 end')}
async function async2() { console.log('async start') return new Promise((resolve, reject) => { resolve() console.log('async2 promise') })}
console.log('script start')setTimeout(() => { console.log('setTimeout')}, 0);
async1()
new Promise((resolve) => { console.log('promise1') resolve()}).then(() => { console.log('promise2')}).then(() => { console.log('promise3')})console.log('script end')
复制代码
结语
如果你觉得此文对你有一丁点帮助，点个赞，鼓励一下林三心哈哈。或者可以加入我的摸鱼群，我们一起好好学习啊啊啊啊啊啊啊，我会定时模拟面试，简历指导，答疑解惑，咱们互相学习共同进步！！
评论