jQuery：如何等待两个事件触发后执行目标函数？

嘿，这个需求其实挺常见的，我给你两种简单直接的实现思路，你可以根据自己的场景来选：

方法1：用Promise + 事件监听（推荐） #

这种方法利用Promise的特性来优雅地等待多个事件，代码可读性很高：

首先，我们可以把每个事件转换成一个Promise，当事件触发时resolve这个Promise：

// 封装一个等待指定事件的函数
function waitForEvent(eventEmitter, eventName) {
  return new Promise((resolve) => {
    // 用once确保只监听一次事件，避免重复触发
    eventEmitter.once(eventName, resolve);
  });
}

// 然后等待两个事件都完成后执行第三个函数
async function executeThirdFunction() {
  // 同时等待event1和event2触发
  await Promise.all([
    waitForEvent(yourEventEmitter, 'event1'),
    waitForEvent(yourEventEmitter, 'event2')
  ]);
  
  // 两个事件都触发后，执行你的第三个函数
  yourThirdFunction();
}

// 启动流程
executeThirdFunction();

这里需要注意：yourEventEmitter是你的事件发射器（比如Node.js的EventEmitter实例，或者浏览器里的DOM元素/自定义事件对象），yourThirdFunction就是你要执行的第三个函数。这种方法的好处是利用了Promise的异步流程控制，代码逻辑清晰，还能方便地处理错误（比如加try/catch）。

方法2：简单计数器方式（更直观） #

如果你不想用Promise，也可以用一个计数器来跟踪事件触发的次数：

let eventTriggerCount = 0;
// 需要等待的事件总数
const requiredEvents = 2;

function checkAndRun() {
  eventTriggerCount++;
  // 当两个事件都触发时，执行第三个函数
  if (eventTriggerCount === requiredEvents) {
    yourThirdFunction();
    // 可选：如果后续还需要重复监听，可以重置计数器
    // eventTriggerCount = 0;
  }
}

// 给两个事件绑定一次性监听
yourEventEmitter.once('event1', checkAndRun);
yourEventEmitter.once('event2', checkAndRun);

这种方法非常直观，每次事件触发就把计数器加1，当计数器达到目标值时就执行第三个函数。同样用once而不是on，防止同一个事件多次触发导致计数器错误。

小提醒 #

不管用哪种方法，都尽量用once来绑定事件监听，而不是on，这样能避免同一个事件被触发多次时，重复执行后续逻辑。如果是浏览器环境，事件源是DOM元素的话，把yourEventEmitter换成对应的元素（比如document或者某个按钮DOM节点）就行，监听事件的API是addEventListener，比如：

document.addEventListener('event1', checkAndRun, { once: true });

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