使用 queueMicrotask 创建微任务！

之前我们想尽一切办法来创建一个自定义的微任务，如 Promise.then、MutationObserver（浏览器环境中的 API，用于监视 DOM 变动）、async/await、process.nextTick（仅Node.js支持，本质来说它不是事件循环的一部分）。

在偶然的情况下，我发现浏览器竟然具有专门产生微任务的方法！

它就是原生的 queueMicrotask 方法，该方法存在于 window 对象中，并且目前兼容性还不错：

queueMicrotask 用法很简单，传入一个想要被包装成微任务的函数即可，看下面的例子：

console.log('1');
queueMicrotask(() => {
  console.log('2');
  Promise.resolve().then(() => {
    console.log('3');
  });
  setTimeout(() => {
    console.log('4');
    queueMicrotask(() => {
      console.log('5');
    });
  });
});
setTimeout(() => {
  Promise.resolve().then(() => {
    console.log('6');
  });
  console.log('7');
  queueMicrotask(() => {
    console.log('8');
  });
});
console.log('9');

打印结果： 1 9 2 3 7 6 8 4 5

相对来说，queueMicrotask 是产生微任务最方便的方法了，希望还没实现的浏览器厂商抓紧时间跟进！

网上搜了一下，发现早在18年 queueMicrotask 提案就得到了通过，19年就有哥们介绍了该 API，我竟然现在才知道，实属汗颜。