JavaScript 中怎么用微任务实现简单的发布订阅分发-js教程-PHP中文网

可用queuemicrotask()或promise.resolve().then()将事件分发推入微任务队列，确保当前同步代码执行完后立即、顺序一致地触发所有监听器，避免阻塞且优于settimeout的宏任务延迟。

javascript 中怎么用微任务实现简单的发布订阅分发

可以用 Promise.resolve().then() 或 queueMicrotask() 把事件分发逻辑推入微任务队列，确保在当前同步代码结束后、下一轮宏任务前执行订阅回调，避免同步阻塞，也保证响应顺序一致。

用 `queueMicrotask` 实现发布订阅

这是最直接的方式，语义清晰且原生支持：

每次 publish 时不立即执行回调，而是用 queueMicrotask 推入微任务
所有订阅者会在当前调用栈清空后、渲染或定时器之前被统一触发
即使多次 publish，每个都会生成独立微任务，保持调用顺序

示例：

class EventEmitter {
  constructor() {
    this.subscribers = new Map();
  }

  subscribe(event, callback) {
    if (!this.subscribers.has(event)) {
      this.subscribers.set(event, []);
    }
    this.subscribers.get(event).push(callback);
  }

  publish(event, data) {
    const callbacks = this.subscribers.get(event) || [];
    // 微任务中分发，不阻塞当前同步流程
    queueMicrotask(() => {
      callbacks.forEach(cb => cb(data));
    });
  }
}

const ee = new EventEmitter();
ee.subscribe('click', (d) => console.log('A:', d));
ee.subscribe('click', (d) => console.log('B:', d));

console.log('before');
ee.publish('click', 'hello');
console.log('after');
// 输出顺序：before → after → A: hello → B: hello

用 `Promise.resolve().then()` 兼容旧环境

在不支持 queueMicrotask 的环境中（如较老版本 Safari），可用 Promise 微任务降级：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

原理相同：Promise.then 回调属于微任务
注意避免意外的异常穿透（可加 catch 吞掉订阅者抛出的错误）
不需要真正返回 Promise，仅利用其微任务调度能力

替换 publish 方法即可：

publish(event, data) {
  const callbacks = this.subscribers.get(event) || [];
  Promise.resolve().then(() => {
    callbacks.forEach(cb => {
      try {
        cb(data);
      } catch (e) {
        console.error('Subscriber error:', e);
      }
    });
  });
}