之前我们想尽一切办法来创建一个自定义的微任务,如 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,我竟然现在才知道,实属汗颜。