setTimeout、promise、async/await执行顺序引发的对宏观任务和微观任务的理解

话不多说,先上代码,看看你有几斤几两:

//请写出输出内容
async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
}

console.log('script start');

setTimeout(function() {
    console.log('setTimeout');
}, 0)

async1();

new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});
console.log('script end');


/*
script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout
*/

然后我们跟随js引擎一起来看看到底怎么处理的:
一些你需要事先知道的规则:
js是单线程语言,对于异步操作只能先把它放在一边,按照某种规则按先后顺序放进一个容器(其实就是存入宏观任务和微观任务队列中),先处理眼前立即执行的任务(也就是同步任务),同步任务都结束后再回头处理之前放入队列中的异步操作。就像一个人一次只能接听一个电话,接听电话中突然又来另一个电话只能先把新来的电话挂起,等手头电话通话结束后再按来电时间挨个回话(总得有个先来后到吧兄弟)。
按照规定,能发起宏观任务的方法有:script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境);
微观任务:Promise.then、MutaionObserver、process.nextTick(Node.js 环境),async/await实际上是promise+generator的语法糖,也就是promise,也就是微观任务;
什么是宏观任务、微观任务?你可以百度一下它的定义,然而我肯定你看完会很头大,其实你只需要知道:
同步任务结束后,先处理微观任务后处理宏观任务
上面代码说明:
先输出'script start',这句没争议;
接下来碰到setTimeout(),属于异步操作,遵守规定它属于宏观任务,所以把它放入宏观任务队列,让出线程,继续执行其他同步代码;
然后开始async1(),async方法的处理方式:碰到await后先立即执行await后面的代码,也就是async2()async2()打印出'async2',然后让出线程,把console.log('async1 end')这句话放入微观队列,继续执行其他同步代码;
继续,碰到了promisenew Promise内的代码会立即执行(为啥?看es6语法呗),打印出'promise1',然后把then()里面的语句,也就是console.log('promise2')放入微观队列,让出线程继续执行同步代码;
最后执行console.log('script end'),打印出'script end'
到此为止所有同步代码执行结束,现在来看看异步操作都留下了哪些微观任务及宏观任务
宏观任务:只有setTimeout()留下的一句话:console.log('setTimeout')
微观任务:按加入顺序排列有:console.log('async1 end')console.log('promise2')
继续按照规定办事,先处理微观任务后处理宏观任务,也就是按顺序打印'async1 end''promise2''setTimeout'

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

毕竟我是大神

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值