JS微队列添加函数方法

在 JavaScript 中，将函数添加到微任务队列（microtask queue）主要有以下两种方法：

1. 使用 Promise.resolve().then()

通过 Promise 的 then 方法可以将回调推入微队列。当 Promise 被解决（resolved）时，回调函数会作为微任务执行：

Promise.resolve().then(() => {
  console.log('这个函数被添加到微队列');
});

特点：

• 兼容性较好，支持所有实现了 Promise 的环境（包括较旧的浏览器）。
• 如果回调中抛出错误，会被 Promise 捕获为拒绝（rejection），可能导致未处理的错误。

2. 使用 queueMicrotask() API

现代浏览器提供了专用的 queueMicrotask 方法，直接将函数加入微队列：

queueMicrotask(() => {
  console.log('这个函数被添加到微队列');
});

特点：

• 语义更清晰，专为微任务设计，避免 Promise 可能的副作用（如错误处理）。
• 兼容性：支持现代浏览器（Chrome 71+、Firefox 69+、Safari 12.1+、Edge 79+），但 IE 不支持。

如何选择？

• 推荐 queueMicrotask：在支持的现代环境中优先使用，代码更直观。
• 降级方案：在不支持 queueMicrotask 时回退到 Promise：

if (typeof queueMicrotask !== 'function') {
  queueMicrotask = (fn) => Promise.resolve().then(fn);
}

微任务与宏任务的区别

• 微任务：在当前宏任务结束后、下一个宏任务开始前执行（如 Promise、queueMicrotask、MutationObserver）。
• 宏任务：在事件循环的新一轮迭代中执行（如 setTimeout、setInterval、事件回调）。

示例对比

// 宏任务（宏队列）
setTimeout(() => console.log('宏任务执行'), 0);

// 微任务（微队列）
queueMicrotask(() => console.log('微任务执行'));

输出顺序：

微任务执行
宏任务执行

通过这两种方法，可以确保函数在微任务队列中执行，适用于需要异步但高优先级的场景（如状态更新后立即操作 DOM）。