Puppeteer实现特定控制台事件等待时如何避免重复添加事件监听器

问题本质 #

当前实现的核心逻辑缺陷是将「页面事件订阅」与「单次等待的业务逻辑」强绑定：每次生成新的等待Promise时，都向page的console事件队列新增一个永久有效的监听器，长期运行会造成内存泄漏，还可能因为已失效的旧监听器被触发，导致Promise重复resolve、逻辑错乱。

方案1：全局单监听器 + 等待任务队列（推荐，长期复用场景最优） #

不管需要多少次等待指定console事件，仅向page注册一次console事件监听器，将所有待匹配的等待任务存入统一队列，每次收到console消息时，遍历队列执行匹配逻辑，匹配成功则触发对应任务的状态变更、并将任务从队列移除。
对应可运行代码：

// 模块作用域内仅执行一次初始化逻辑
const pendingWaiters = new Set();
let isConsoleListenerRegistered = false;

function initSingleConsoleListener(page) {
  // 避免重复注册监听器
  if (isConsoleListenerRegistered) return;
  page.on('console', (msg) => {
    // 遍历所有待处理的等待任务
    for (const waiter of pendingWaiters) {
      try {
        // 执行任务自带的匹配规则
        const matched = waiter.matchRule(msg);
        if (matched) {
          // 匹配成功，触发对应resolve，移除已完成的任务
          waiter.resolve(msg);
          pendingWaiters.delete(waiter);
        }
      } catch (err) {
        // 匹配逻辑出错时，触发对应reject，移除异常任务
        waiter.reject(err);
        pendingWaiters.delete(waiter);
      }
    }
  });
  isConsoleListenerRegistered = true;
}

function waitForEndEvent(page, targetText = "final time") {
  initSingleConsoleListener(page);
  return new Promise((resolve, reject) => {
    // 将当前等待任务加入全局队列
    pendingWaiters.add({
      resolve,
      reject,
      matchRule: (msg) => {
        // 自定义匹配规则：仅匹配指定类型、包含目标文本的timeEnd事件
        return msg.type() === 'timeEnd' && msg.text().includes(targetText);
      }
    });
  });
}

这个方案的优势：

• 无论调用多少次waitForEndEvent，page上仅保留一个console事件监听器，从根源上避免重复注册
• 支持同时存在多个不同匹配规则的等待任务，任务之间完全隔离互不干扰
• 已完成、已异常的任务会自动从队列移除，无内存残留
• 匹配规则可灵活扩展，不需要改动监听器的核心逻辑

方案2：临时监听器自动解绑（适合低频单次调用场景） #

如果场景对性能要求不高，调用waitForEndEvent的频次很低，可以在监听器触发匹配成功后，手动将该监听器从page上移除，避免无效监听器长期残留。
对应代码：

function waitForEndEvent(page) {
  return new Promise((resolve, reject) => {
    // 将监听器函数单独定义，方便后续移除
    const consoleHandler = (msg) => {
      try {
        if (msg.type() === 'timeEnd' && msg.text().includes("final time")) {
          console.log('timeEnd:', msg.text());
          // 匹配成功后第一时间解绑
          page.off('console', consoleHandler);
          resolve(msg);
        }
      } catch (err) {
        // 异常场景下同样需要解绑，避免监听器残留
        page.off('console', consoleHandler);
        reject(err);
      }
    };
    // 注册临时监听器
    page.on('console', consoleHandler);
  });
}

这个方案的局限：

• 短时间内多次调用等待函数时，会临时存在多个console监听器，仅靠匹配完成后的自动解绑避免永久残留，长期高频调用下性能不如方案1

注意事项 #

• 不要直接使用page.once('console', ...)实现需求：该方法的解绑逻辑是收到任意一条console消息就会触发回调并解绑，不会等待匹配到目标timeEnd事件，很容易被其他无关控制台日志提前打断等待流程
• 修正原代码的参数传递bug：原实现中filterMessage函数未接收res/rej参数，内部直接引用外部作用域的变量，运行时会出现引用错误，需要在实现时显式传递依赖

内容的提问来源于stack exchange，提问作者kohlerm