当前位置：首页 > article >正文

前端如何创建微任务

article 2025/1/17 17:15:09

在 JavaScript 中，微任务（microtask）是在当前同步代码执行完毕后立即执行的任务，并且在下一个宏任务开始之前。它们确保了某些操作能够在当前任务完成后尽快得到处理。以下是一些可以创建微任务的对象和方法：

1. Promise

Promise 是创建微任务最常见的方式之一。当一个 Promise 被解析或拒绝时，它的 .then()、.catch() 和 .finally() 回调会被添加到微任务队列中。

console.log('Start');

Promise.resolve().then(() => console.log('Microtask from Promise'));

console.log('End');


// 输出顺序
// Start
// End
// Microtask from Promise

2. MutationObserver

MutationObserver 用于监视 DOM 树的变化。当观察到的变化被提交时，MutationObserver 的回调函数会被添加到微任务队列中。

console.log('Start');

const observer = new MutationObserver(() => {
  console.log('Microtask from MutationObserver');
});

observer.observe(document.body, { childList: true });

document.body.appendChild(document.createElement('div'));

console.log('End');

// 输入顺序
// Start
// End
// Microtask from MutationObserver

3. queueMicrotask()

queueMicrotask() 是一个专门用于将回调函数添加到微任务队列的函数。它接受一个回调函数作为参数，并确保该回调会在当前同步代码执行完毕后立即执行。

onsole.log('Start');

queueMicrotask(() => console.log('Microtask from queueMicrotask'));

console.log('End');

// 输出顺序
// Start
// End
// Microtask from queueMicrotask

queueMicrotask 浏览器兼容性：

4. process.nextTick（Node.js 环境）

在 Node.js 环境中，process.nextTick() 也可以用来创建微任务。它会将回调函数添加到微任务队列中，确保其在当前操作完成之后但在事件循环进入下一轮之前执行。

示例（仅适用于 Node.js）

console.log('Start');

process.nextTick(() => console.log('Microtask from process.nextTick'));

console.log('End');

// 输出顺序
// tart
// End
// Microtask from process.nextTick

5. async/await

虽然 async/await 不是直接创建微任务的方法，但当你使用 await 等待一个 Promise 解析时，await 后面的代码会被作为一个微任务添加到微任务队列中。

console.log('Start');

(async function() {
  await Promise.resolve();
  console.log('Microtask from async/await');
})();

console.log('End');

// 输出顺序
// Start
// End
// Microtask from async/await