一篇文章彻底搞懂异步,同步,setTimeout,Promise,async

本文详细解析了JavaScript中async函数与Promise的工作原理及执行顺序。通过具体代码示例,阐述了async函数如何返回Promise对象,await关键字如何使函数暂停执行,以及Promise的.then方法如何异步执行。同时,对比了setTimeout与async函数、Promise的执行优先级。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

async function async1() {
console.log(‘async1 start’)
await async2()
console.log(‘async1 end’)
}
async function async2() {
console.log(‘async2’)
}
console.log(‘script start’)
setTimeout(() => {
console.log(‘setTimeout’)
},0)
async1()
new Promise((resolve) => {
console.log(‘promise1’)
resolve()
}).then(() => {
console.log(‘promise2’)
})
console.log(‘script end’)
setTimeout是一个计时器,异步的,所以被扔到了任务队列里面, async1 async2 这只是定义了俩个异步函数(),并没有调用,所以暂时不用管。 调用了async1函数,会走入到这个函数里,我们先再看一下这个函数:
PS:注意点:
当调用async函数的时候会返回一个Promise对象。Promise对象是立即执行的,后面会详细介绍。
这时候会

2.输出async1 start,

而后到了await async2()
这里需要注意一下,在async里遇到await它会使async函数暂停执行,执行完async里的await内容后将后续的内容扔入到浏览器的任务队列里面去。
所以这里输出了async1 start后又

3.输出了async2

async2执行完毕之后又走回到调用了async1的位置。将async1没有执行的部分扔到了任务队列里面去。(现在任务队列里面有一个setTimeout和一个async1的后续内容)

接下来又走到了Promise:
4.输出promise1。

而后是执行了resolve。执行成功,执行成功的话会走入promise的.then方法里,可是它是异步的回调函数,所以会被丢入到任务队列里。(现在任务队列里面有一个setTimeout和一个async1的后续内容在加上promise的.then内容)

最后走到了:
5.输出:script end

前五个我们都分析完毕了,接下来到关键点了:
现在异步队列中有三个任务分别是:

setTimeout
async1的后续内容
promise的.then内容
这三个内容setTimeout会在最后执行,就好比css权重的优先级,大家固定记住就可以,setTimeout的优先级没有async和promise级别高(其实async和promise是一样的,因为调用async方法时就是返回一个promise对象)
而后async和promise的.then就看谁先进入到的任务队列里面,任务队列里面有先进先出的概念。所以结果很明显了,它们三个的输出顺序是:
6.输出:async1 end
7.输出:promise2
8.输出:setTimeout

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值