1、promise执行顺序
正常顺序执行 -> then -> setTimeouts -> then中 setTimeouts
如下例:
<script>
console.log(1)
const p = new Promise((resolve) => {
console.log(2)
resolve()
})
console.log(3)
setTimeout(() => {
console.log(4)
}, 0)
p.then(() => console.log(5))
setTimeout(() => {
console.log(6)
}, 0)
console.log(7)
</script>
输出:1 2 3 7 5 4 6
分析:
正常顺序执行:输出1 2 3 7;
then:输出5;
setTimeouts :输出4 6。
2、js 宏任务和微任务执行顺序
具体执行过程
首先 JavaScript 引擎会执行一个宏任务,注意这个宏任务一般是指主干代码本身,也就是目前的同步代码。执行过程中如果遇到微任务,就把它添加到微任务队列中。宏任务执行完成后,立即执行当前微任务队列中的微任务,直到微任务队列被清空。微任务执行完成后,开始执行下一个宏任务。如此循环往复,直到宏任务和微任务被清空。
宏任务:主代码块、setTimeout、setInterval、DOM事件、AJAX请求。
微任务:Promise、async/await、process.nextTick。
如下例
//主线程直接执行
console.log('1');
//丢到宏事件队列中
setTimeout(function() {
console.log('2');
process.nextTick(function() {
console.log('3');
})
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
})
//微事件1
process.nextTick(function() {
console.log('6');
})
//主线程直接执行
new Promise(function(resolve) {
console.log('7');
resolve();
}).then(function() {
//微事件2
console.log('8')
})
//丢到宏事件队列中
setTimeout(function() {
console.log('9');
process.nextTick(function() {
console.log('10');
})
new Promise(function(resolve) {
console.log('11');
resolve();
}).then(function() {
console.log('12')
})
})
输出结果
1->7->6->8->2->4->3->5->9->11->10->12
分析过程:
主代码块作为宏任务最先运行:输出1,7;
setTimeout分发到宏任务事件队列Event Queue中;
process.nextTick,Promise.then分发到微任务事件队列Event Queue中;
此时,主代码块执行完毕,即第一个宏任务执行完毕,开始执行微任务,输出 6,8;
第一个微任务执行完毕,开始执行第二个宏任务setTimeout,遵循先执行主线程宏任务,再执行微任务process.nextTick,输出2,4,3,5;
开始执行第三个宏任务setTimeout,遵循先执行主线程宏任务,再执行微任务,输出9,11,10,12。
总结
1、微任务是在宏任务的执行中产生的,所以一开始程序执行时是没有微任务的。
2、系统将微任务执行完以后,才会去执行下一个宏任务。
3、宏任务里如果有宏任务,不会执行里面的那个宏任务,而是被丢进任务队列后面,所以会最后执行。
4、宿主环境提供的属于宏任务:例如setTimeout。由语言标准提供的属于微任务:例如promise.then。可以以此来区分宏任务和微任务。