setTimeout+Promise+Async输出顺序？

注明：本文不涉及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

宏任务 && 微任务

前面说了，等所有同步代码都执行完，再从事件队列里依次执行所有异步回调函数。

其实事件队列也是一个小团体，人家也有自己的规则，这就类似于学校管理着许多社团，人家自己社团内部也有人家自己的规矩。

话说回来，为什么事件队列里需要有自己的规则呢？要不你先想想为什么学校里的社团里要有自己的规则要分等级，是因为有的人能力强有的人能力弱，所以也就有了等级的高低。其实事件队列也一样，事件队列是用来存异步回调的，但是异步也分类型啊，异步任务分为宏任务和微任务，并且微任务执行时机先于宏任务

那宏任务和微任务都分别有哪些呢？

宏任务

#	浏览器	Node
I/O	✅	✅
setTimeout	✅	✅
setInterval	✅	✅
setImmediate	❌	✅
requestAnimationFrame	✅	❌

微任务

#	浏览器	Node
Promise.prototype.then catch finally	✅	✅
process.nextTick	❌	✅
MutationObserver	✅	❌

执行流程

那就来说说整体的执行的流程吧

例子

大家可以根据我的解题步骤去走，基本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

• 产生宏任务：无，产生微任务：无

• 剩余宏任务：无，剩余微任务：无