关于javascript:自创解法setTimeoutPromiseAsync输出顺序简单的一匹

前言

大家好，我是林三心，有对于EventLoop的知识点，在平时是考的十分多的，其实也跟咱们日常的工作时非亲非故的，懂得EventLoop的执行程序，能够大大帮忙咱们定位出问题出在哪。其实失常的EventLoop程序是很容易分辨的，然而如果setTimeout + Promise + async/await联起手来是十分辣手的。明天我就带大家过五关斩六将，驯服他们！！！

注明：本文不波及Nodejs执行机制

同步 && 异步

什么是异步，什么是同步，我不多说，我就通过小故事来讲讲吧。

• 同步：你打电话去书店订书，老板说我查查，你不挂电话在期待，老板把查到的后果通知你，这期间你不能做本人的事件
• 异步：你打电话去书店订书，老板说我查查，回头通知你，你把电话挂了，先去做本人的事件

JS执行机制

其实不难，JavaScript代码执行机制，我就归结为三句话

• 1、遇到同步代码间接执行
• 2、遇到异步代码先放一边，并且将他回调函数存起来，存的中央叫事件队列
• 3、等所有同步代码都执行完，再从事件队列中把存起来的所有异步回调函数拿进去按程序执行

请看以下例子

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) // 同步

第一轮

• 阐明：先把同步的执行输入
• 输入：1，3，5
• 产生宏工作：setTimeout，产生微工作：Promise.prototype.then

第二轮

• 阐明：微工作先执行
• 输入：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); // 同步

第二步：分轮

课后作业

最初给大家安排两道作业，帮大家坚固一下本文章所学的常识，大家也能够退出我的摸鱼群，进行答案的探讨。进群点击这里[进群](
https://juejin.cn/pin/6969565...)，目前已有将近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原理根底能力比拟轻松的答对，有趣味的同学能够看我之前写过的文章

• 看了就会，手写Promise原理，最通俗易懂的版本【浏览：1.1w，点赞：430】

• 7张图，20分钟就能搞定的async/await原理！为什么要拖那么久【浏览量：1.8w，点赞：571】

  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')

  结语

如果你感觉此文对你有一丁点帮忙，点个赞，激励一下林三心哈哈。或者能够退出我的摸鱼群（看我材料）