如何处理异步方法中confirm的返回值并阻止按钮后续动作？

问题根源 #

你代码的核心问题出在2个地方：

• jQuery.each() 遍历的回调函数中执行 return confirm(xxx) 仅会终止当前遍历项的执行，不会将布尔值返回给外层的statusMethod函数，所以外层始终拿不到取消的信号，自然无法阻止后续动作
• 缺少对confirm返回值的全局判断，只要有一次用户点击取消，就应该直接终止整个遍历并返回false给上层

修复方案 #

这里给你两种实现，优先推荐异步ajax的写法（同步ajax会阻塞主线程，体验很差，已经被主流规范不推荐）：

方案1：保留同步ajax写法（仅做逻辑修复）

function statusMethod() {
  // 初始默认返回true，只要有一次取消就改成false
  let allowPass = true;
  jQuery.each(rows, function(rowid, row) {
    var ic = row.cat_a_req___task_status_raw;
    var og = 'close';
    let sttMsg = "";
    jQuery.ajax({
      type: "POST",
      url: "/spc/statusCheck/check.php",
      data: {
        incoming: ic,
        outgoing: og
      },
      dataType: "json",
      success: function(data) {
        sttMsg = data.checkMsg;
      },
      async: false
    });
    // 只要用户点取消，就把标记位改false，同时return false终止each遍历
    if(!confirm(sttMsg)) {
      allowPass = false;
      return false;
    }
  });
  // 最终返回标记位结果
  return allowPass;
}
return statusMethod();

方案2：推荐的异步ajax实现（避免页面阻塞）

如果你的按钮事件是提交类动作，可以用阻止默认行为+手动触发的方式优化体验：

// 给按钮绑定点击事件示例
jQuery('#yourButtonId').on('click', async function(e) {
  // 先阻止默认提交动作
  e.preventDefault();
  const _this = this;
  let allowPass = true;

  for (let row of rows) { // 用普通for循环替代each方便async/await处理
    const ic = row.cat_a_req___task_status_raw;
    const og = 'close';
    // 用await等待ajax返回，不会阻塞主线程
    const data = await jQuery.ajax({
      type: "POST",
      url: "/spc/statusCheck/check.php",
      data: { incoming: ic, outgoing: og },
      dataType: "json"
    });
    if(!confirm(data.checkMsg)) {
      allowPass = false;
      break;
    }
  }

  // 全部确认通过再执行后续动作，比如手动提交表单
  if(allowPass) {
    // 这里写你原来的后续逻辑，比如 _this.submit() 或者其他动作
  }
})

核心修改说明 #

• 新增全局标记位记录用户所有确认操作的结果，最后统一返回给外层调用方
• 检测到用户点击取消时，直接终止遍历，避免不必要的请求
• 异步方案用async/await替代过时的同步ajax，不会造成页面假死

内容的提问来源于stack exchange，提问作者Tan Çetin