setTimeout+Promise+Async输出顺序？

🕗 发布于 2024-03-14 17:20 javascript 前端 开发语言

注明：本文不涉及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
产生宏任务：无，产生微任务：无
剩余宏任务：无，剩余微任务：无

第一关

想一想我刚刚说的解题思路，大家可以按照那个思路来，这道题也就是分分钟的事情啦

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

第二步：分轮

轮数	说明	输出	产生	剩余
第一轮	执行外层同步输出	1，4，5，8	宏任务：`setTimeout1` 微任务：`then2`	宏任务：`setTimeout1` 微任务：`then2`
第二轮	执行微任务`then2`	6	宏任务：`setTimeout2` 微任务：无	宏任务：`setTimeout1，setTimeout2` 微任务：无
第三轮	执行宏任务`setTimeout1`	2	宏任务：无微任务：`then1`	宏任务：`setTimeout2` 微任务：`then1`
第四轮	执行微任务`then1`	3	宏任务：无微任务：无	宏任务：`setTimeout2` 微任务：无
第五轮	执行宏任务`setTimeout2`	7	宏任务：无微任务：无	宏任务：无微任务：无

第二关

大家在遇到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

第二步：分轮

轮数	说明	输出	产生	剩余
第一轮	执行同步输出	2，3，6	宏任务：`setTimeout` 微任务：`then1`	宏任务：`setTimeout` 微任务：`then1`
第二轮	执行微任务`then1`	4	宏任务：无微任务：`then2`	宏任务：`setTimeout` 微任务：`then2`
第三轮	执行微任务`then2`	5	宏任务：无微任务：无	宏任务：`setTimeout` 微任务：无
第四轮	执行宏任务`setTimeout`	1	宏任务：无微任务：无	宏任务：无微任务：无

第三关

再说一遍：大家在遇到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)
  })
})

第二步：分轮

轮数	说明	输出	产生	剩余
第一轮	执行外层同步输出	1	宏任务：无微任务：`then1`	宏任务：无微任务：`then1`
第二轮	执行微任务`then1`	2，3	宏任务：无微任务：`then2、then4`	宏任务：无微任务：`then2、then4`
第三轮	执行微任务`then2，then4`	4，6	宏任务：无微任务：`then3`	宏任务：无微任务：`then3`
第四轮	执行微任务`then3`	5	宏任务：无微任务：无	宏任务：无微任务：无

第四关

这一关，比上一关多了一个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)
  })
})

第二步：分轮

轮数	说明	输出	产生	剩余
第一轮	执行外层同步输出	1	宏任务：无微任务：`then1`	宏任务：无微任务：`then1`
第二轮	执行微任务`then1`	2，3	宏任务：无微任务：`then2、then3、then4`	宏任务：无微任务：`then2、then3、then4`
第三轮	执行微任务`then2、then3、then4`	4，5，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)
})

第二步：分轮

轮数	说明	输出	产生	剩余
第一轮	执行外层同步输出	1，7	宏任务：无微任务：`then1、then5`	宏任务：无微任务：`then1、then5`
第二轮	执行微任务`then1、then5`	2，3，8	宏任务：无微任务：`then2、then4`	宏任务：无微任务：`then2、then4`
第三轮	执行微任务`then2、then4`	4，6	宏任务：无微任务：`then5`	宏任务：无微任务：`then5`
第四轮	执行微任务`then5`	5	宏任务：无微任务：无	宏任务：无微任务：无

第六关

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

第二步：分轮

轮数	说明	输出	产生	剩余
第一轮	执行同步输出	4，1，3，6，8	宏任务：`setTimeout` 微任务：`then1、then2`	宏任务：`setTimeout` 微任务：`then1、then2`
第二轮	执行微任务`then1、then2`	2，7	宏任务：无微任务：无	宏任务：`setTimeout` 微任务：无
第三轮	执行宏任务`setTimeout`	5	宏任务：无微任务：`then5`	宏任务：无微任务：无

课后作业

最后给大家布置两道作业，帮大家巩固一下本文章所学的知识，大家也可以加入我的摸鱼群，进行答案的讨论。进群点击这里进群，目前已有将近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')

结语

欢迎大家评论区留言

原文地址：https://blog.csdn.net/qq_36877763/article/details/136709462

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：2024年腾讯云服务器地域如何选择？选错了不能改！
下一篇：【OceanBase诊断调优】—— 带你认sql_audit性能视图

Java项目:校园宿舍管理系统(优质版)(Springboot3+Maven+Mybatis Plus+Vue3+ Element Plus+Mysql)
Springboot3+Maven+Mybatis Plus+Vue3+ Element Plus+Mysql 开发的前后端分离的校园宿舍管理系统。
阅读更多2024-11-16
IntelliJ IDEA新建项目或导入未识别为maven解决
1.首先，我的情况是我新建了一个springboot项目，然后选择类型是Maven但是建立后不是maven项目。当然，前提是你的maven已经在idea上做好配置了。2.打开项目后，从File --》
阅读更多2024-11-16
Gin HTML 模板渲染
Gin HTML模板入门
阅读更多2024-11-16
未来的车网互动如何重塑我们的城市生活
设想一下，在一个寒冷的冬日，你的车辆通过车网互动得知前方桥梁可能结冰，它会自动降低速度，并提醒你注意驾驶安全。公众的参与同样重要，只有当越来越多的车辆加入到车网互动系统中，才能真正发挥其潜力，提高整个
阅读更多2024-11-16
人工智能技术的应用前景及其对生活和工作方式的影响
人工智能技术的应用前景广阔，它不仅在医疗、企业和日常生活中带来了显著的变化，还将继续推动社会的创新和发展。面对 AI 技术带来的机遇和挑战，我们需要共同努力，确保技术的发展能够造福人类社会，创造一个更
阅读更多2024-11-16
《AI技术，让生活更简单》
想象一下，你回到家，灯自动亮了，空调调到你喜欢的温度，冰箱告诉你牛奶快没了，甚至还能帮你预约超市送货。这不是科幻电影，这就是AI技术正在做的事情。
阅读更多2024-11-16
sychronized锁
sychronized 关键字能成为锁的原因，是因为它提供了**内置锁（Intrinsic Lock）**机制，用于线程同步，确保同一时刻只有一个线程能够访问被标记为 synchronized 的代码
阅读更多2024-11-16
SpringBoot 2.2.10 无法执行Test单元测试
同样的Idea版本，现有的项目却可以执行，按照C老师的提示增加对junit5的引用支持，依然没有，StackOverflow上也是提示增加依赖，依赖加完之后执行报错一个 EnginListener N
阅读更多2024-11-16
springMVC 全局异常统一处理
进⾏异常处理，具有集成简单、有良好的扩展性、对已有代码没有⼊侵性等优点，但该⽅法仅能获取到异常信息，若在出现异常时，对需要获取除异常以外的数据的情况不适⽤。Unchecked Exception，⽽
阅读更多2024-11-16
thinkphp6配置多应用项目及多域名访问路由app配置
ThinkPHP 多应用模式初探
阅读更多2024-11-16

setTimeout+Promise+Async输出顺序？

同步 && 异步

JS执行机制

宏任务 && 微任务

宏任务

微任务

执行流程

例子

第一关

第一步：标记

第二步：分轮

第二关

第一步：标记 + 转换

第二步：分轮

第三关

第一步：标记 + 转换

第二步：分轮

第四关

第一步：标记 + 转换

第二步：分轮

第五关

第一步：标记 + 转换

第二步：分轮

第六关

第一步：标记 + 转换

第二步：分轮

课后作业

第一题（思考题）

第二题（问题不大）

第三题（有点难度）

结语

相关文章