前端如何创建微任务

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

1. Promise

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

javascript 复制代码

console.log('Start');

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

console.log('End');


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

2. MutationObserver

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

javascript 复制代码

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

javascript 复制代码

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）

javascript 复制代码

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 后面的代码会被作为一个微任务添加到微任务队列中。

javascript 复制代码

console.log('Start');

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

console.log('End');

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

总结

以下是可以在 JavaScript 中创建微任务的主要方式：

Promise ：通过 .then()、.catch() 和 .finally() 方法。
MutationObserver：监视 DOM 变化并触发微任务。
queueMicrotask()：专门用于将回调添加到微任务队列的函数。
process.nextTick：仅适用于 Node.js 环境。
async/await：通过等待 Promise 解析来创建微任务。

这些方法允许你在不同的场景中灵活地控制异步操作的执行时机，确保某些代码能够在当前任务完成后尽快执行。如果你有更多具体的问题或需要进一步的帮助，请随时提问！