$.ajax配置async:false时beforeSend内弹窗不生效问题

async: false配置会触发同步AJAX请求，直接阻塞浏览器UI渲染主线程。beforeSend回调中执行$.blockUI时仅触发了DOM更新操作，浏览器还未完成页面重绘将弹窗渲染到界面，线程就被同步请求占用，必须等请求全流程完成后才会恢复UI渲染，此时弹窗要么无展示机会，要么刚渲染就被后续逻辑清除，因此无法正常弹出。

彻底弃用同步AJAX配置，改回默认异步请求模式，将依赖请求返回结果的后续逻辑迁移到AJAX对应的回调函数中执行，既不会阻塞UI渲染让加载弹窗正常展示，也能保证和同步请求一致的执行顺序。

基础回调写法 #

直接在AJAX配置中补充对应生命周期回调处理业务逻辑：

$.ajax({
  url: "<%=request.getContextPath()%>/url.do",
  type: 'GET',
  data: data,
  cache: false,
  dataType: 'text',
  // 移除async: false配置，使用默认异步模式
  beforeSend: function() {
    $.blockUI({
      theme: true,
      fadeIn: 0,
      title: "Personal Information",
      message: "Saving information...",
      timeout: 3000
    });
  },
  success: function(result) {
    // 编写请求成功后的业务逻辑，如处理返回数据、提示操作结果、页面跳转等
  },
  error: function(xhr) {
    // 编写请求异常时的兜底逻辑，如提示保存失败
  },
  complete: function() {
    // 无论请求成功/失败都会执行的逻辑
    // 可在此处手动调用$.unblockUI()关闭加载弹窗，无需等待3秒超时
    $.unblockUI();
  }
});

类同步逻辑写法（async/await） #

如果习惯同步代码的线性执行逻辑，可以用async/await写法实现相同效果，不会阻塞UI线程：

async function submitPersonalInfo() {
  // 先展示加载弹窗
  $.blockUI({
    theme: true,
    fadeIn: 0,
    title: "Personal Information",
    message: "Saving information...",
    timeout: 3000
  });

  try {
    // 等待请求返回，执行顺序和同步请求完全一致
    const result = await $.ajax({
      url: "<%=request.getContextPath()%>/url.do",
      type: 'GET',
      data: data,
      cache: false,
      dataType: 'text'
    });
    // 此处编写请求成功后的业务逻辑，和写在同步$.ajax()后的执行效果完全相同
  } catch (err) {
    // 此处编写请求异常处理逻辑
  } finally {
    // 关闭加载弹窗
    $.unblockUI();
  }
}

// 调用提交方法
submitPersonalInfo();

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