setTimeout+Promise+Async输出顺序？

2024-03-15 04:44
文章标签 输出 顺序 settimeout async promise

本文主要是介绍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

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

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

第一关

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

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) // 异步：宏任务 setTimeout1Promise.resolve().then(() => { // 异步：微任务 then1console.log(3)})
});
console.log(4) // 同步
new Promise((resolve,reject) => {console.log(5) // 同步resolve()
}).then(() => { // 异步：微任务 then2console.log(6)setTimeout(() => {console.log(7) // 异步：宏任务 setTimeout2})
})
console.log(8) // 同步

第二步：分轮

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

第二关

大家在遇到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(() => { // 异步：宏任务 setTimeoutconsole.log(1)
}, 0)
console.log(2) // 同步
const p = new Promise((resolve) => { // p 是 then1 执行返回的新 Promiseconsole.log(3) // 同步resolve()
}).then(() => { // 异步：微任务 then1console.log(4)// 拿着 p 重新 thenp.then(() => { // 异步：微任务 then2console.log(5)})
})
console.log(6) // 同步 6

第二步：分轮

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

第三关

再说一遍：大家在遇到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 执行返回的新 Promiseconsole.log(1) // 同步resolve()
}).then(() => { // 异步：微任务 then1console.log(2)const p2 = new Promise((resolve, reject) => { // p2 是 then2 执行返回的新 Promiseconsole.log(3) // then1 里的 同步resolve()}).then(() => { // 异步：微任务 then2console.log(4)// 拿着 p2 重新 thenp2.then(() => { // 异步：微任务 then3console.log(5)})})// 拿着 p1 重新 thenp1.then(() => { // 异步：微任务 then4console.log(6)})
})

第二步：分轮

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

第四关

这一关，比上一关多了一个return

前面说了，then方法会自动返回一个新的Promise，相当于return new Promise，但是如果你手动写了return Promise，那return的就是你手动写的这个Promise

new Promise((resolve, reject) => {console.log(1)resolve()
}).then(() => {console.log(2)// 多了个returnreturn new Promise((resolve, reject) => {console.log(3)resolve()}).then(() => {console.log(4)}).then(() => { // 相当于return了这个then的执行返回Promiseconsole.log(5)})
}).then(() => {console.log(6)
})

第一步：标记 + 转换

由于return的是then3执行返回的Promise，所以then4其实是then3Promise.then()，所以可转换为then3.then4

new Promise((resolve, reject) => {console.log(1) // 同步resolve()
}).then(() => { // 异步：微任务 then1console.log(2) // then1 中的 同步new Promise((resolve, reject) => {console.log(3) // then1 中的 同步resolve()}).then(() => { // 异步：微任务 then2console.log(4)}).then(() => { // 异步：微任务 then3console.log(5)}).then(() => { // 异步：微任务 then4console.log(6)})
})

第二步：分轮

轮数说明输出产生剩余
第一轮执行外层同步输出1宏任务：无
微任务：then1		宏任务：无
微任务：then1
第二轮执行微任务then12，3宏任务：无
微任务：then2、then3、then4		宏任务：无
微任务：then2、then3、then4
第三轮执行微任务then2、then3、then44，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 执行返回的新 Promiseconsole.log(1) // 同步resolve()
}).then(() => { // 异步：微任务 then1console.log(2)const p2 = new Promise((resolve, reject) => { // p2 是 then2 执行返回的新 Promiseconsole.log(3) // then1 里的 同步resolve()}).then(() => { // 异步：微任务 then2console.log(4)// 拿着 p2 重新 thenp2.then(() => { // 异步：微任务 then3console.log(5)})})// 拿着 p1 重新 thenp1.then(() => { // 异步：微任务 then4console.log(6)})
})new Promise((resolve, reject) => {console.log(7) // 同步resolve()
}).then(() => {  // 异步：微任务 then5console.log(8)
})

第二步：分轮

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

第六关

其实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(() => { // 异步：微任务 then1console.log(2)
})
// async1函数结束new Promise(function (resolve, reject) {console.log(6); // 同步resolve();
}).then(function () { // 异步：微任务 then2console.log(7);
});
console.log(8); // 同步

第二步：分轮

轮数说明输出产生剩余
第一轮执行同步输出4，1，3，6，8宏任务：setTimeout
微任务：then1、then2		宏任务：setTimeout
微任务：then1、then2
第二轮执行微任务then1、then22，7宏任务：无
微任务：无		宏任务：setTimeout
微任务：无
第三轮执行宏任务setTimeout5宏任务：无
微任务：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')

结语

欢迎大家评论区留言

这篇关于setTimeout+Promise+Async输出顺序？的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/810828。

相关文章

Rust格式化输出方式总结

Rust格式化输出方式总结

《Rust格式化输出方式总结》Rust提供了强大的格式化输出功能,通过std::fmt模块和相关的宏来实现,主要的输出宏包括println!和format!,它们支持多种格式化占位符,如{}、{:?}... 目录Rust格式化输出方式基本的格式化输出格式化占位符Format 特性总结Rust格式化输出方式
阅读更多...
Python中顺序结构和循环结构示例代码

Python中顺序结构和循环结构示例代码

《Python中顺序结构和循环结构示例代码》：本文主要介绍Python中的条件语句和循环语句,条件语句用于根据条件执行不同的代码块,循环语句用于重复执行一段代码,文章还详细说明了range函数的使... 目录一、条件语句（1）条件语句的定义（2）条件语句的语法（a）单分支 if（b）双分支 if-else（
阅读更多...
关于Spring @Bean 相同加载顺序不同结果不同的问题记录

关于Spring @Bean 相同加载顺序不同结果不同的问题记录

《关于Spring@Bean相同加载顺序不同结果不同的问题记录》本文主要探讨了在Spring5.1.3.RELEASE版本下,当有两个全注解类定义相同类型的Bean时,由于加载顺序不同,最终生成的... 目录问题说明测试输出1测试输出2@Bean注解的BeanDefiChina编程nition加入时机总结问题说明
阅读更多...
C++实现封装的顺序表的操作与实践

C++实现封装的顺序表的操作与实践

《C++实现封装的顺序表的操作与实践》在程序设计中,顺序表是一种常见的线性数据结构,通常用于存储具有固定顺序的元素,与链表不同,顺序表中的元素是连续存储的,因此访问速度较快,但插入和删除操作的效率可能... 目录一、顺序表的基本概念二、顺序表类的设计1. 顺序表类的成员变量2. 构造函数和析构函数三、顺序表
阅读更多...
使用TomCat,service输出台出现乱码的解决

使用TomCat,service输出台出现乱码的解决

《使用TomCat,service输出台出现乱码的解决》本文介绍了解决Tomcat服务输出台中文乱码问题的两种方法,第一种方法是修改`logging.properties`文件中的`prefix`和`... 目录使用TomCat,service输出台出现乱码问题1解决方案问题2解决方案总结使用TomCat,
阅读更多...
C++中实现调试日志输出

C++中实现调试日志输出

《C++中实现调试日志输出》在C++编程中,调试日志对于定位问题和优化代码至关重要,本文将介绍几种常用的调试日志输出方法,并教你如何在日志中添加时间戳,希望对大家有所帮助... 目录1. 使用 #ifdef _DEBUG 宏2. 加入时间戳：精确到毫秒3.Windows 和 MFC 中的调试日志方法MFC
阅读更多...
Python使用Colorama库美化终端输出的操作示例

Python使用Colorama库美化终端输出的操作示例

《Python使用Colorama库美化终端输出的操作示例》在开发命令行工具或调试程序时,我们可能会希望通过颜色来区分重要信息,比如警告、错误、提示等,而Colorama是一个简单易用的Python库... 目录python Colorama 库详解：终端输出美化的神器1. Colorama 是什么？2.
阅读更多...
JAVA利用顺序表实现“杨辉三角”的思路及代码示例

JAVA利用顺序表实现“杨辉三角”的思路及代码示例

《JAVA利用顺序表实现“杨辉三角”的思路及代码示例》杨辉三角形是中国古代数学的杰出研究成果之一,是我国北宋数学家贾宪于1050年首先发现并使用的,：本文主要介绍JAVA利用顺序表实现杨辉三角的思... 目录一：“杨辉三角”题目链接二：题解代码：三：题解思路：总结一：“杨辉三角”题目链接题目链接：点击这里
阅读更多...
Python中的异步:async 和 await以及操作中的事件循环、回调和异常

Python中的异步:async 和 await以及操作中的事件循环、回调和异常

《Python中的异步:async和await以及操作中的事件循环、回调和异常》在现代编程中,异步操作在处理I/O密集型任务时,可以显著提高程序的性能和响应速度,Python提供了asyn... 目录引言什么是异步操作？python 中的异步编程基础async 和 await 关键字asyncio 模块理论
阅读更多...
顺序表之创建，判满，插入，输出

顺序表之创建，判满，插入，输出

文章目录 🍊自我介绍🍊创建一个空的顺序表，为结构体在堆区分配空间🍊插入数据🍊输出数据🍊判断顺序表是否满了，满了返回值1，否则返回0🍊main函数 你的点赞评论就是对博主最大的鼓励 当然喜欢的小伙伴可以：点赞+关注+评论+收藏（一键四连）哦~ 🍊自我介绍   Hello,大家好，我是小珑也要变强（也是小珑），我是易编程·终身成长社群的一名“创始团队·嘉宾”
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2