【JavaScript】宏任务和微任务

前言

前端八股文，在一些大厂的面试题经常出现宏任务和微任务，现做一个总结。

宏任务和微任务

JS的异步任务分为了宏任务和微任务。
宏任务：

setTimeout
setInterval
setImmediate(Node)
requestAnimationFrame(浏览器)

微任务：

process.nextTick
Promise的then、catch方法

JS的任务执行顺序

JS会先执行同步任务，再执行所有的微任务代码，最后执行所有的宏任务代码。
注：Promise也是同步代码，只是里面的then、catch是异步中的微任务

例子

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
 */

从上往下，将对应的语句放入对应的执行队列，1进入同步任务，setTimeout进入宏任务，process.nextTick进入微任务，new Promise（之前说了Promise是同步任务）进入同步任务，第二个setTimeout进入宏任务。
执行顺序为：

同步任务	微任务	宏任务
console.log(‘1’)	process.nextTick	第1个 setTimeout
new Promise		第2个 setTimeout

输出1 7

执行了new Promise之后里面触发了resolve，也就是执行Promise.then，
所以执行顺序为：

同步任务	微任务	宏任务
	process.nextTick	第1个 setTimeout
	Promise.then	第2个 setTimeout

输出6 8
以此类推再执行宏任务里的两个setTimeout
最终结果输出1 7 6 8 2 4 3 5 9 11 10 12

参考

【前端八股文】事件循环-宏任务和微任务

宏任务和微任务的执行顺序