如何在按钮onClick点击事件中调用async函数，等待弹窗确认后执行搜索

实现方案 #

核心思路 #

把用户确认条款的操作封装为Promise，等待用户点击「我已知晓」按钮后resolve这个Promise，就可以配合async/await实现“先确认条款再执行搜索”的逻辑。

调整后代码示例 #

// 封装条款弹窗的确认逻辑，返回Promise等待用户操作
function showTermsPopup() {
  return new Promise((resolve) => {
    // 弹出条款弹窗
    activateLoadingOverlay2()
    // 给弹窗内的「我已知晓」按钮绑定单次点击事件，避免重复绑定
    $('#terms-confirm-btn').one('click', () => {
      // 这里补充你关闭弹窗的逻辑，比如 hideLoadingOverlay2()
      resolve()
    })
  })
}

// 把点击回调改为async函数，才能使用await语法
export function initSearchButtonOnClick() {
  $("#search-button").on("click", async function (e) {
    e.preventDefault();
    // 先做基础表单校验，不符合要求就不弹条款，优化用户体验
    let formValid = false
    switch (flightType) {
      case "rt":
      case "ow":
        formValid = $("#from-destination")[0].reportValidity() && $("#to-destination")[0].reportValidity()
        break
      // 其他行程类型的校验可以在这里补充
    }
    if (!formValid) return

    // 等待用户确认条款，确认后才会执行后续代码
    await showTermsPopup()

    // 以下是原有搜索逻辑，用户确认后才会触发
    console.log("blerdii");
    const fromDestination = $("#from-destination").val()
    // 你的剩余搜索代码可以继续写在这里
  })
}

注意事项 #

• 代码里的#terms-confirm-btn需要替换成你实际项目中「我已知晓」按钮的选择器
• 如果弹窗有直接关闭不确认的选项，可以给关闭按钮额外绑定reject逻辑，配合try/catch捕获后不执行后续搜索
• 用jQuery的one方法绑定点击事件而非on，避免多次点击搜索按钮重复绑定事件导致逻辑错乱

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