如何在JavaScript按钮事件处理器中使用async/await？

核心思路是把两个按钮的点击事件包装成一个Promise，通过await让代码暂停执行，直到任意一个按钮被点击，再继续后续逻辑。以下是完整实现：

async function mainloop() {
  // 获取按钮元素
  const buttonYes = document.getElementById("buttonyes");
  const buttonNo = document.getElementById("buttonno");

  // 创建Promise，等待任意按钮点击
  const buttonClicked = new Promise((resolve) => {
    // Yes按钮点击处理
    const handleYes = () => {
      // 这里写Yes按钮的逻辑
      console.log("执行Yes按钮的代码");
      // 移除监听器，避免重复触发
      buttonYes.removeEventListener("click", handleYes);
      buttonNo.removeEventListener("click", handleNo);
      resolve("yes");
    };

    // No按钮点击处理
    const handleNo = () => {
      // 这里写No按钮的逻辑
      console.log("执行No按钮的代码");
      // 移除监听器
      buttonYes.removeEventListener("click", handleYes);
      buttonNo.removeEventListener("click", handleNo);
      resolve("no");
    };

    // 绑定点击事件
    buttonYes.addEventListener("click", handleYes);
    buttonNo.addEventListener("click", handleNo);
  });

  // 等待按钮点击，代码会在这里暂停
  const clickedButton = await buttonClicked;

  // 按钮点击后的后续代码，无论点哪个都会执行
  console.log(`你点击了${clickedButton}按钮，继续执行后续逻辑`);
  console.log("yay waiting for stuff");
}

// 启动主函数
mainloop();

关键说明： #

1. async函数：必须把mainloop声明为async函数，才能在内部使用await关键字。
2. Promise包装事件：Promise的作用是把异步的点击事件转换成可以“等待”的对象。当任意按钮被点击时，执行对应逻辑后调用resolve()，通知await可以继续执行。
3. 移除监听器：点击后移除监听器是为了避免重复触发（比如多次点击按钮会多次执行逻辑），如果需要支持多次点击，可以调整这部分逻辑。
4. 结果传递：resolve()可以传递参数（比如"yes"/"no"），后续代码可以根据这个参数做差异化处理。

这种写法模拟了C语言里的同步阻塞逻辑，但本质是JavaScript的异步非阻塞机制，符合JS的运行规则。

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