前言:
我们在项目中长使用的异步方法 promise与定时器 在一起后,他们的顺序是什么样呢?这里来说一说。
案例1:
console.log('异步打印顺序:');
console.log(1);
setTimeout(()=>{
console.log(2);
},2000)
setTimeout(()=>{
console.log(3);
},0)
Promise.resolve().then(()=>{
console.log(4); //微任务
})
Promise.resolve().then(()=>{
console.log(5); //微任务
},6000)
console.log(6);
结果是:
1、先执行正常的js,比如1->6
2、再执行 promise的then,比如 4->5
3、最后再执行 定时器,根据秒数来控制 ,比如 3->2
案例2:
console.log('异步打印顺序:');
setTimeout(()=>console.log(1))
new Promise(resolve => {
console.log(2);
resolve()
}).then(()=>{
console.log(3);
})
console.log(4);
结果是:
1、先执行 promise的 resolve
1、先执行正常的js
2、再执行 promise的then
3、最后再执行 定时器,
总结:执行顺序:
1、同步先执行
promise的 resolve也属于同步,跟在 promise外面效果是一致的
2、同步结束以后在执行异步里面的微任务
比如 promise的 then
3、最后是宏任务 定时器
为什么异步里面是先执行宏任务,但是实际打印的情况,却是先打印 微任务,在打印宏任务?
官方解释:
先执行同步代码,遇到异步宏任务则将异步宏任务放入宏任务队列中,遇到异步微任务则将异步微任务放入微任务队列中,
1、当所有同步代码执行完毕后,
2、再将异步微任务从队列中调入主线程执行,
3、微任务执行完毕后再将异步宏任务从队列中调入主线程执行,一直循环直至所有任务执行完毕。
简单来说:
因为宏任务试下一个时间循环开始的宏任务,而微任务是这次事件循环就执行的微任务,他们之间隔了一个dom渲染,所以造成了微任务比宏任务更快执行的错觉
宏任务和微任务
宏任务:当前调用栈中执行的代码成为宏任务。(主代码快,定时器等等)。
微任务:当前(此次事件循环中)宏任务执行完,在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。(promise.then ,promise.catch 等等)。