JavaScript中Promise封装的事件监听器为何仅触发一次？

算力阿峰

2026-8-27

问题原因

核心原因是Promise的状态只能变更一次，一旦从pending（等待中）变为fulfilled（已兑现）状态，后续无论怎么调用resolve都不会再触发then回调，这是JavaScript语言原生设计的特性，和事件监听器有没有注册成功没有关系。

你的代码实际执行逻辑是这样的：

调用when("click")时生成一个新的Promise实例，同时给按钮注册了click事件监听，回调是Promise的resolve函数
第一次点击按钮时，resolve被触发，Promise状态变更为fulfilled，立刻执行then里注册的alert("button clicked")逻辑
后续每次点击按钮，绑定在按钮上的resolve函数确实会被调用，但Promise的状态已经定格为fulfilled，不会再重复执行then里的回调
这里还存在一个隐藏的内存泄漏问题：Promise兑现后，绑定在DOM元素上的resolve监听器不会被自动移除，会一直驻留在内存中，多余的调用没有任何实际作用。

要明确一点：Promise本身是为了封装一次性的异步结果设计的，从设计之初就不适合处理点击事件这种会重复触发的流场景。

解决方案

根据实际需求选对应写法即可：

如果只是需要每次点击按钮都执行逻辑，不需要额外的异步链式封装，直接绑定普通事件回调即可，这也是最通用的写法：

const target = document.getElementById("button");
target.addEventListener("click", () => {
  alert("button clicked");
});

如果你需要在点击触发的逻辑里写异步代码（比如点击后发请求、等动画执行完再响应下一次点击），可以用循环+每次生成新Promise的写法，同时记得及时移除无用的事件监听器避免内存泄漏：

const target = document.getElementById("button");
async function bindClick() {
  while (true) {
    // 等待单次点击
    await new Promise((resolve) => {
      const handler = () => {
        // 触发后立刻移除当前监听器，避免残留
        target.removeEventListener("click", handler);
        resolve();
      };
      target.addEventListener("click", handler);
    });
    // 点击后要执行的逻辑，支持await异步操作
    alert("button clicked");
  }
}
bindClick();

内容的提问来源于stack exchange，提问作者Vehbi Karaağaç