最近发现关于JS运行机制的宏任务与微任务有的小伙伴还不是特别清楚,今天我们就好好讲一下,希望大家可以彻底理解,废话少说,先看东西
如果有人问你什么是宏任务什么是微任务,这样告诉他,多说一个字都是多余
宏任务:包括整段代码script,setTimeout,setInterval
微任务:Promise,process.nextTick
不同类型的任务会进入不同的事件队列,就是我们所说的宏任务队列和微任务队列。我们知道js执行是有顺序的,那到底是什么决定了这个顺序呢?就是事件循环的顺序。首先进入整体代码(宏任务)后,开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始,找到其中一个任务队列执行完毕,再执行所有的微任务。
setTimeout(function() {
console.log('setTimeout');
})
new Promise(function(resolve) {
console.log('promise');
}).then(function() {
console.log('then');
})
console.log('console');
- 整段代码作为宏任务进入主线程
- 遇到settimeout,将其回调函数注册后分发到宏任务Event Queue。
- 遇到了Promise,new Promise立即执行,then函数分发到微任务Event Queue
- 遇到console.log(),立即执行
- 第一个宏任务执行结束,看看有什么微任务,发现有then,执行
- 第二轮循环,发现宏任务settimeout的回调函数,执行。
- 结束。
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')
})
})
process.nextTick(function() {
console.log('6');
})
new Promise(function(resolve) {
console.log('7');
resolve();
}).then(function() {
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