亲宝软件园·资讯

展开

js中的宏任务与微任务

拿饭盒当烟灰缸 人气:1

如果你已经知道了js中存在宏任务和微任务,那么你一定已经了解过promise了。因为在js中promise是微任务的一个入口。
先来看一道题:

setTimeout(function(){
    console.log('setTimeout')
});

new Promise(function(resolve, reject){
    console.log('pormise body');
    resolve();
}).then(function(){
    console.log('promise then')
});

console.log('main');

这题的答案是:

promise body
main
promise then
setTimeout

promise body出现在第一行一点也不意外,意外的是,setTimeout出现在了promise then的后边。
 
setTimeout和promise then都是异步调用,setTimeout又定义在promise之前,如果没有意外,应该是先输出setTimeout才对,但这里却恰恰相反。
 
这里涉及到的知识点,就是宏任务与微任务了。标记一下上边的代码:

setTimeout(function(){ // 同步代码,语句1
    console.log('setTimeout') // 宏任务,语句2
});

new Promise(function(resolve, reject){
    console.log('pormise body'); // 同步代码,语句3
    resolve(); // 同步代码,语句4
}).then(function(){
    console.log('promise then') // 微任务,语句5
});

console.log('main'); // 同步代码,语句6

那么他们运行的规则是怎样的呢?
 
原来,宏任务与微任务,都各自有一个调用队列(先进先出)。
 
遇到宏任务,微任务,则将他们推入各自的调用队列。需要注意的是,同步代码也是宏任务。
 
宏任务执行完一个,则去清空微任务队列,微任务清空后再去执行下一个宏任务。
 
这个过程颇像去医院诊室排队看大夫的情景:
如果有一个病人A叫到号以后,又被大夫安排先去做检查,那么做完检查以后病人A回到诊室门口,可以直接等待当前正在看病的病人B与大夫交谈结束后,将检查结果交给大夫,而不用再次排队。
 
我们来把上面的代码一行一行解读一下:
 
首先定义两个队列,宏任务队列:MacroQqueue, 微任务队列: MicroQueue
 
第一步,先按同步代码顺序运行
同步代码,语句1: 添加一个宏任务,将语句2推入MacroQueue。 // MacroQueue: [{task: 语句2}]
同步代码,语句3: 打印promise body
同步代码,语句4: 添加一个微任务,将语句5推入MicroQueue。 // MicroQueue: [{task: 语句5}]
同步代码,语句6: 打印main。 // 同步代码(宏任务)完成
 
第二步,开始清空微任务队列
微任务: 语句5,从MicroQueue跳出,打印promise then。 // 微任务队列全部清空
 
第三步,开始清空宏任务队列
宏任务:语句2,从MacroQqueue跳出,打印setTimeout // 宏任务队列全部清空
 
第四步:开始清空微任务队列
队列为空...
 
一轮循环完成。开始下一轮,如此循环下去。
 
通过上面的讲解,大家应该能对宏任务,微任务的运行机制有了一定的了解了吧。那么都有哪些常见的宏任务与微任务呢?
请看下表:
 

宏任务 浏览器 nodejs
同步代码
I/O
setTimeout
setInterval
setImmediate
requestAnimationFrame

 

微任务 浏览器 nodejs
process.nextTick
MutationObserver
Promise (async/await)

好了,我们来一道复杂一点的题练练手:

console.log('sync statement 1');
Promise.resolve().then(function() {
    console.log('micro task 1');
    setTimeout(function() {
        console.log('macro task 1');
    }, 0);
}).then(function() {
    console.log('micro task 2');
});

setTimeout(function() {
    console.log('macro task 2')
    Promise.resolve().then(function(){
        console.log('micro task 3');
    })
}, 0)
console.log('sync statement 2');

//输出:
// sync statement 1
// sync statement 2
// micro task 1
// micro task 2
// macro task 2
// micro task 3
// macro task 1

标注一下方便大家分析:

console.log('sync statement 1'); // 同步代码,语句1
Promise.resolve().then(function() { // 同步代码,语句2,注册了一个微任务
    console.log('micro task 1'); // 微任务,语句3
    setTimeout(function() { // 微任务,语句4,同时注册了一个宏任务
        console.log('macro task 1'); // 宏任务,语句5
    }, 0);
}).then(function() {
    console.log('micro task 2'); // 微任务,语句6
});

setTimeout(function() { // 同步代码,语句7
    console.log('macro task 2') // 宏任务,语句8
    Promise.resolve().then(function(){ // 宏任务,语句9,同时注册了一个微任务
        console.log('micro task 3'); // 微任务,语句10
    })
}, 0)
console.log('sync statement 2'); // 同步代码,语句11

加载全部内容

相关教程
猜你喜欢
用户评论