jQuery.bind()绑定Ajax事件在Chrome/Edge失效，Firefox正常运行

问题说明 #

这段代码在Firefox 103.0中能正常控制loading的显示与隐藏，但在Chrome和Microsoft Edge里无法生效：

$('#loading').bind('ajaxStart', function () {
  $(this).show();
}).bind('ajaxStop', function () {
  $(this).hide();
});

控制台提示（已翻译）：

主线程上的同步XMLHttpRequest已被弃用，因为它会对终端用户体验产生不利影响。

原因分析 #

Chrome和Edge对同步AJAX的限制更为严格，ajaxStart/ajaxStop事件不会触发同步AJAX请求的相关回调；而Firefox目前仍兼容这类旧行为。同步AJAX会阻塞主线程，造成页面卡顿，这也是现代浏览器逐步限制它的核心原因。

解决方案 #

1. 将同步AJAX改为异步（推荐）
   找到发起同步请求的代码，移除或修改async: false的设置（jQuery默认即为异步）：

// 原同步请求（问题根源）
$.ajax({
  url: '请求地址',
  async: false,
  // 其他参数
});

// 修改为异步请求
$.ajax({
  url: '请求地址',
  // 可省略async，默认就是true；也可显式声明async: true
  // 其他参数
});

修改后，ajaxStart/ajaxStop就能正常触发，loading效果会在各浏览器中一致生效。

2. 手动控制loading状态（仅特殊场景使用）
   如果确实必须使用同步请求（不推荐），直接在请求前后手动控制loading：

// 请求前显示loading
$('#loading').show();
// 执行同步请求
$.ajax({
  url: '请求地址',
  async: false,
  // 其他参数
});
// 请求完成后隐藏loading
$('#loading').hide();

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