如何在同步Ajax请求期间将鼠标指针设置为忙碌状态

我完全懂你的困扰——20多个JS文件里的同步Ajax请求一个个手动加样式代码，简直是重复劳动的噩梦！之前的ajaxSend/ajaxComplete对异步请求好用，但同步请求因为会阻塞浏览器线程，导致样式变化根本来不及渲染，用户完全看不到鼠标变成忙碌状态。

给你两个全局解决方案，不用改任何现有请求代码，一次性搞定所有同步+异步请求：

方法一：用ajaxSetup全局配置（最简单） #

直接通过ajaxSetup设置全局的请求前后钩子，同时处理同步请求的重绘问题：

// 先在CSS里定义好样式，确保优先级足够
// .wait { cursor: wait !important; }

$.ajaxSetup({
  beforeSend: function(xhr, settings) {
    $('body').addClass('wait');
    // 针对同步请求：强制浏览器立即重绘，否则样式会被阻塞看不到
    if (!settings.async) {
      // 触发浏览器重绘的小技巧：读取offsetWidth会强制计算布局
      void document.body.offsetWidth;
    }
  },
  complete: function() {
    // 请求完成（成功/失败都算）移除样式
    $('body').removeClass('wait');
  }
});

这个方法的好处是代码极简，直接全局生效，单个请求的beforeSend/complete回调依然会正常执行（和全局钩子叠加）。

方法二：重写$.ajax函数（更灵活） #

如果需要更精细的控制，可以直接重写jQuery的ajax方法，把样式处理逻辑封装进去：

// 保存原始的ajax方法
const originalAjax = $.ajax;

// 重写ajax方法
$.ajax = function(options) {
  // 1. 添加忙碌样式
  $('body').addClass('wait');

  // 2. 处理原始的complete回调，确保请求完成后移除样式
  const originalComplete = options.complete;
  options.complete = function(...args) {
    $('body').removeClass('wait');
    // 如果原来有complete回调，记得执行它
    if (originalComplete) {
      originalComplete.apply(this, args);
    }
  };

  // 3. 同步请求强制重绘
  if (!options.async) {
    void document.body.offsetWidth;
  }

  // 4. 调用原始的ajax方法
  return originalAjax(options);
};

这个方式的优势是可以在请求前后做更多自定义操作，比如日志记录、请求拦截等，适合后续有扩展需求的场景。

关键原理说明 #

同步请求会阻塞JavaScript执行线程，浏览器在请求完成前不会进行页面重绘——这就是为什么之前的ajaxSend没效果：样式加了，但浏览器根本没机会渲染。而void document.body.offsetWidth这个小技巧会强制浏览器立即计算布局，触发重绘，这样用户就能看到鼠标变成忙碌状态了。

记得确保你的.wait样式优先级足够，比如加!important，避免被页面其他元素的cursor样式覆盖。

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