向微队列添加任务的四种方式

闻风听雨_

已于 2024-03-02 16:24:03 修改

阅读量1k

点赞数 15

文章标签： javascript node.js web

于 2024-03-02 15:39:05 首次发布

本文链接：https://blog.csdn.net/qq_44685584/article/details/136416920

版权

向微队列添加任务的四种方式

关于微任务，微队列，事件循环，可参考：深入：微任务与 Javascript 运行时环境 - Web API 接口参考 | MDN (mozilla.org)

先说答案, 四种方法：

Promise.resolve().then();
MutationObserver
process.nextTick();
queueMicrotask()

Promise.resolve().then()

查看ECMA-262关于then方法的描述:

可知then方法会在promise状态为fulfilled或rejected时将对应的任务(onFulfilled和onRejected)放到任务队列中，然后注意到MDN在一篇关于微任务的文章中提到:

JavaScript 中的 promise 和 Mutation Observer API 都使用微任务队列去运行它们的回调函数

于是我们可以知道then方法的回调将会被添加到微队列中执行, 若查看V8引擎源码可进一步佐证这一点。

这样一来，我们就可以用以下代码向微队列中添加一个任务:

const task = () => {
    console.log("do somthing");
}
Promise.resolve().then(task);

进一步, 根据ECMA-262的描述(上图红框部分), 当promise状态为rejected时，onRejected也会被添加到微队列, 于是以下代码也可以达到相同的效果：

//以下两种方法等价
Promise.reject().then(null, task);

Promise.reject().catch(task);

验证一下, 执行以下代码, 发现打印顺序符合预期：

setTimeout(() => {
  console.log("timeout");
}, 0);
Promise.resolve().then(() => {
  console.log("promise resolve");
})

Promise.reject().then(null, () => {
  console.log("promise reject");
});

Promise.reject().catch(() => {
  console.log("promise catch");
});
console.log("同步");

//打印结果:
// 同步
// promise resolve
// promise reject
// promise catch
// timeout

MutationObserver API

同样根据上文提到的MDN的描述, 使用MutationObserver也可以达到向微队列中添加任务的目的, 结合MutationObserver的用法可以封装一个通用的函数:

    function enqueueMicroTaskByMutationObserver(task) {
      if (typeof task != "function") {
        throw "task必须为函数";
      }
      let m = new MutationObserver(task);
      let div = document.createElement("div");
      m.observe(div, {
        childList: true
      });
      div.innerText = "1";
    }

注意: nodejs环境不支持MutationObserver API，因此这个方法只能在浏览器环境中使用

在html中运行以下代码验证, 打印顺序符合预期：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    function enqueueMicroTaskByMutationObserver(task) {
      if (typeof task != "function") {
        throw "task必须为函数";
      }
      let m = new MutationObserver(task);
      let div = document.createElement("div");
      m.observe(div, {
        childList: true
      });
      div.innerText = "1";
    }
    setTimeout(() => {
      console.log("time out");
    }, 0);
    enqueueMicroTaskByMutationObserver(() => {
      console.log("MutationObserver");
    })
  </script>
</body>

</html>

process.nextTick()

与MutationObserver API相反，这个方法只能用于Node环境，根据Node文档的描述:

process.nextTick() 将 callback 添加到 “下一个滴答队列”。在 JavaScript 堆栈上的当前操作运行完成之后，且在允许事件循环继续之前，此队列将被完全排空。

暂时可将"滴答队列"简单理解为微队列，实际上，"滴答队列"的优先级似乎比微队列更高, 观察以下代码：

setTimeout(() => {
  console.log("timeout");
}, 0);

Promise.resolve().then(() => {
  console.log("promise resolve");
})

process.nextTick(() => {
  console.log("tick");
})

console.log("同步");

发现无论执行多少次, "tick"总是先于"promise resolve"打印，于是推测"滴答队列"的优先级似乎比微队列更高.

queueMicrotask

在不考虑兼容性的情况下, 应当首选这个方法, 因为这个方法就是专门用来做将微任务加入队列这件事的, 参考MDN:queueMicrotask() - Web API 接口参考 | MDN (mozilla.org)

同时, queueMicrotask在浏览器和node环境中都可以使用且用起来也是最简单的，用法如下：

queueMicrotask(() => {
  console.log("do somthing");
})

如有错漏，恳请指出

闻风听雨_

关注

15
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
向微队列添加任务的四种方式

在 JavaScript 堆栈上的当前操作运行完成之后，且在允许事件循环继续之前，此队列将被完全排空。发现无论执行多少次, “tick"总是先于"promise resolve”，于是推测"滴答队列"的优先级似乎比微队列更高.方法的回调将会被添加到微队列中执行, 若查看V8引擎源码可进一步佐证这一点。在不考虑兼容性的情况下, 应当首选这个方法, 因为这个方法就是专门用来做。也可以达到向微队列中添加任务的目的, 结果。都使用微任务队列去运行它们的回调函数。同样根据上文提到的MDN的描述, 使用。
复制链接

扫一扫