flushJob.md

标题	标签
flushJob(刷新队列)	flush,queue(刷新，队列)

刷新队列。

• 使用 Set 数据结构存储回调函数。
• 创建一个微任务。
• 定义一个变量代表是否刷新。
• 如果变量为 true，代表正在刷新，因此不执行。
• 执行微任务的 then 方法，最后更新变量。

const flushJob = () => {
  const jobQueue = new Set();
  const p = Promise.resolve();
  let isFlushing = false;
  const flush = () => {
    // 如果队列正在刷新，则什么都不做
    if (isFlushing) return;
    // 设置为 true，代表正在刷新
    isFlushing = true;
    // 在微任务队列中刷新 jobQueue 队列
    p.then(() => {
      jobQueue.forEach(job => job());
    }).finally(() => {
      // 结束后重置 isFlushing
      isFlushing = false;
    });
  };
  return {
    jobQueue,
    flush
  };
};

调用方式:

const fn = () => {
  console.log(1);
};
const { jobQueue, flush } = flushJob();
jobQueue.add(fn);
jobQueue.add(fn);
flush(); // 1

应用场景

结果如下:

<iframe src="codes/javascript/html/flushJob.html"></iframe>