jQuery同时触发问题：合并点击事件与定时任务后遮罩层无法正常隐藏

看起来你遇到的是全局Ajax事件在并发请求下的计数异常问题——当点击触发的Ajax和定时任务的Ajax几乎同时发起时，jQuery的ajaxStart/ajaxStop机制可能因为请求的并发顺序，导致ajaxStop在所有请求完成前就触发，或者spin插件的状态没有正确同步。下面是几个针对性的解决方案：

1. 手动维护请求计数器（最可靠的方案） #

放弃依赖jQuery自带的全局事件计数，自己维护一个请求计数器，这样完全可控，不会出现并发导致的计数偏差：

// 初始化请求计数器
let activeAjaxRequests = 0;

// 处理Ajax开始的通用函数
function showLoadingState() {
  activeAjaxRequests++;
  // 只有第一个请求发起时才显示遮罩和加载器
  if (activeAjaxRequests === 1) {
    $("#overlay").show();
    $('#wrapper').spin();
  }
}

// 处理Ajax结束的通用函数
function hideLoadingState() {
  activeAjaxRequests--;
  // 确保计数器不会变成负数，所有请求完成后才隐藏
  if (activeAjaxRequests <= 0) {
    activeAjaxRequests = 0;
    $('#wrapper').spin(false);
    $("#overlay").hide();
  }
}

// 给所有jQuery Ajax请求绑定事件
$(document)
  .ajaxSend(showLoadingState)  // 每个请求发送前触发
  .ajaxComplete(hideLoadingState);  // 每个请求完成后触发

这个方案的核心是：每个Ajax请求发送时计数器+1，完成时-1，只有当计数器回到0（所有请求都完成），才关闭遮罩和加载器，完美解决并发场景的问题。

2. 排查非jQuery Ajax请求的影响 #

如果你的定时任务使用的是原生fetch、XMLHttpRequest或者其他非jQuery的Ajax方法，这些请求不会触发jQuery的全局Ajax事件，会导致计数器不准确。这种情况下，需要在定时任务的请求前后手动调用状态处理函数：

比如定时任务用fetch的例子：

setInterval(function() {
  // 请求开始时手动显示加载状态
  showLoadingState();
  
  fetch('/your-timer-api-url')
    .then(response => response.json())
    // 请求完成（无论成功失败）都隐藏加载状态
    .finally(hideLoadingState);
}, 5000);

3. 修复Spin插件的状态异常 #

有时候Spin插件的spin(false)调用可能没有正确销毁实例，导致加载指示器无法关闭。可以尝试手动管理Spin实例：

let spinnerInstance = null;

function showLoadingState() {
  activeAjaxRequests++;
  if (activeAjaxRequests === 1) {
    $("#overlay").show();
    // 保存Spin实例
    spinnerInstance = $('#wrapper').spin().data('spinner');
  }
}

function hideLoadingState() {
  activeAjaxRequests--;
  if (activeAjaxRequests <= 0) {
    activeAjaxRequests = 0;
    // 手动停止并销毁Spin实例
    if (spinnerInstance) {
      spinnerInstance.stop();
      spinnerInstance = null;
    }
    $("#overlay").hide();
  }
}

额外排查点 #

• 检查是否有Ajax请求设置了global: false：这个参数会让请求不触发jQuery的全局Ajax事件，导致计数错误。如果有，要么去掉这个参数，要么手动在请求前后调用showLoadingState/hideLoadingState。
• 检查遮罩层的CSS：是否有其他样式（比如!important）强制修改了#overlay的display属性，导致无法隐藏。

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