JS宏任务与微任务

最近发现关于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');

1. 整段代码作为宏任务进入主线程
2. 遇到settimeout，将其回调函数注册后分发到宏任务Event Queue。
3. 遇到了Promise，new Promise立即执行，then函数分发到微任务Event Queue
4. 遇到console.log()，立即执行
5. 第一个宏任务执行结束，看看有什么微任务，发现有then，执行
6. 第二轮循环，发现宏任务settimeout的回调函数，执行。
7. 结束。

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