JavaScript自定义确认函数无法等待点击返回布尔值如何解决

你当前写的是同步执行的函数，在完成弹窗DOM渲染、按钮点击事件绑定后，会立刻走到return confirmation逻辑，不会暂停执行等待用户点击。此时confirmation变量还未被点击回调赋值，自然无法返回正确的布尔结果。
这类需要等待用户交互的异步场景，原生JS可以直接用Promise实现等待逻辑，无需额外依赖。

将函数改为返回Promise实例，把用户点击后的结果通过resolve抛出，同时补充点击后销毁弹窗的逻辑，避免DOM残留。
完整修正代码：

function Confirmation(title, message, confirm_button_value) {
  if (
    typeof title !== "undefined" ||
    typeof message !== "undefined" ||
    typeof confirm_button_value !== "undefined"
  ) {
    if (title !== "" || message !== "" || confirm_button_value !== "") {
      return new Promise((resolve) => {
        const confirmation_box = document.createElement("div");
        confirmation_box.classList.add("confirmation_box");

        const title_container = document.createElement("div");
        title_container.classList.add("confirmation_box_title");
        title_container.textContent = title;
        confirmation_box.append(title_container);

        const message_container = document.createElement("div");
        message_container.classList.add("confirmation_box_message");
        message_container.textContent = message;
        confirmation_box.append(message_container);

        const buttons_container = document.createElement("div");
        buttons_container.classList.add("confirmation_box_buttons");

        const confirm_button = document.createElement("span");
        confirm_button.classList.add("confirmation_box_confirm_button");
        confirm_button.textContent = confirm_button_value;
        buttons_container.append(confirm_button);

        const cancel_button = document.createElement("span");
        cancel_button.classList.add("confirmation_box_cancel_button");
        cancel_button.textContent = "Cancel";
        buttons_container.append(cancel_button);

        confirmation_box.append(buttons_container);
        document.body.append(confirmation_box);

        confirm_button.onclick = () => {
          confirmation_box.remove();
          resolve(true);
        };

        cancel_button.onclick = () => {
          confirmation_box.remove();
          resolve(false);
        };
      })
    }
  }
  // 入参不符合要求时默认返回false，可根据业务需求调整
  return Promise.resolve(false);
}

注：把原代码里的innerHTML换成了textContent，如果你的title/message确实需要传入HTML内容，可以改回innerHTML，否则textContent能避免XSS风险。另外把var声明换成了const，符合现代JS的变量声明规范，避免变量提升问题。

因为函数现在返回Promise，有两种标准调用方式：

• async/await写法（逻辑更直观，和同步代码书写习惯一致，需要在async函数内使用await）

async function submitForm() {
  const userConfirmed = await Confirmation("操作确认", "确定要提交当前表单吗？", "提交");
  if (userConfirmed) {
    // 执行确认后的业务逻辑
    console.log("表单提交");
  } else {
    // 执行取消后的逻辑
    console.log("已取消提交");
  }
}

• .then()链式调用写法

Confirmation("操作确认", "确定要提交当前表单吗？", "提交").then(userConfirmed => {
  if (userConfirmed) {
    console.log("表单提交");
  } else {
    console.log("已取消提交");
  }
})

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