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

  结语

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