JS的微任务宏任务

176 阅读1分钟

JS是单线程的,能且只能同时执行一个任务。

为了避免需要时间的异步任务卡住执行过程,JS的任务分成了异步任务(asynchronous)和同步任务(synchronous)。

按照代码顺续,遇到同步任务直接执行,遇到异步任务,丢到Event Table并注册函数。

当所有的同步任务执行完毕,开始处理Event Table中的异步任务。

异步任务又分为macro-task:宏任务、micro-task:微任务。

微任务按照顺序,所有的微任务 按照顺序 被扔到微任务的任务队列(task queue),所有宏任务也被 按照顺序 扔到宏任务的任务队列。

然后,开始执行微任务的任务队列。然后如果遇到嵌套的微任务,又会接着那一条微任务的任务队列(task queue),顺延执行。嵌套宏任务同上。

所有微任务执行完,开始执行第一个宏任务,遇到嵌套的微任务,扔到微任务的任务队列,执行完所有的微任务队列,才会进行下一个宏任务的执行。

常见宏任务:

setTimeout、setInterval、setImmediate

常见微任务:

process.nextTick || Promise.then catch finally

实际代码:

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

//作者:张倩qianniuer
//链接:https://juejin.cn/post/6844903638238756878
//来源:掘金