09-宏任务和微任务

ـ٨ـﮩﮩ٨ـ千帆ﮩ٨、

已于 2022-12-14 17:27:42 修改

阅读量341

点赞数

文章标签： javascript 前端 vue.js

于 2022-12-14 17:27:23 首次发布

本文链接：https://blog.csdn.net/biancheng_/article/details/128319483

版权

宏任务是由（浏览器、Node）发起的，而微任务由 JS 自身发起。

宏任务（Macrotask）大概如下：setTimeout setInterval MessageChannel I/O

setImmediate（Node环境） script（整体代码块）

微任务（Microtask）大概如下：MutationObserver（浏览器环境） promise.[ then/catch/finally ]

事件队列 process.nextTick（Node环境）

在执行一个 Promise 对象的时候，当走完resolve();之后，就会立刻把 .then()里面的代码加入到微任务队列当中。
任务的一般执行顺序：同步任务 --> 微任务 --> 宏任务。

代码举例

举例 1：宏任务和微任务的执行顺序

setTimeout(() => {
    // 宏任务
    console.log('setTimeout');
}, 0);

new Promise((resolve, reject) => {
    resolve();
    console.log('promise1'); // 同步任务
}).then((res) => {
    // 微任务
    console.log('promise then');
});

console.log('qianguyihao'); // 同步任务

打印结果：

promise1
qianguyihao
promise then
setTimeout

上方代码执行的顺序依次是：同步任务 --> 微任务 --> 宏任务。

举例 2：宏任务和微任务的嵌套

new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve();
        console.log('setTimeout'); // 宏任务
    }, 0);
    console.log('promise1');
}).then((res) => {
    // 微任务
    console.log('promise then');
});

console.log('qianguyihao');

打印结果：

promise1
qianguyihao
setTimeout
promise then

上方代码解释：在执行宏任务的过程中，创建了一个微任务。但是需要先把当前这个宏任务执行完，再去创建并执行微任务。