如何在多异步Ajax请求场景下实现加载Spinner效果

这其实很容易实现，我给你两种方案，分别适合不同的场景，你可以根据自己的需求选择：

方案一：使用jQuery全局AJAX事件（推荐，最简单） #

这种方式不需要修改你现有的每个AJAX请求代码，只需要添加全局事件监听，自动在第一个请求发起时显示Spinner，所有请求完成后隐藏它。

第一步：添加Spinner的HTML和CSS #

先在页面里加一个隐藏的Spinner容器，配上美化样式：

<!-- 加载Spinner容器 -->
<div id="loadingSpinner" style="display: none;">
  <div class="spinner"></div>
  <p>加载中，请稍候...</p>
</div>

#loadingSpinner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明遮罩，防止用户操作页面 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 确保Spinner在所有元素最上层 */
  color: white;
  font-size: 16px;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db; /* 蓝色顶部，形成旋转效果 */
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

第二步：添加全局AJAX事件监听 #

修改你的初始化代码，加上全局事件：

$(function () {
  // 第一个AJAX请求开始时，显示Spinner
  $(document).ajaxStart(function() {
    $('#loadingSpinner').show();
  });

  // 所有AJAX请求都完成时，隐藏Spinner
  $(document).ajaxStop(function() {
    $('#loadingSpinner').hide();
  });

  // 你的原有初始化请求
  PageFunction_1();
  PageFunction_2();
  PageFunction_3();
  PageFunction_4();
});

// 你的原有函数完全不需要修改！
function PageFunction_1(){
  $.ajax({
    url : endpoint1,
    type : "post",
    async : true,
    success : function(data) {
      //load data to html divs
    }
  });
}

function PageFunction_2(){
  $.ajax({
    url : endpoint2,
    type : "post",
    async : true,
    success : function(data) {
      //load data to html divs
    }
  });
}

// ... 其他PageFunction保持不变

方案二：手动控制请求计数（更灵活） #

如果你希望只有特定的AJAX请求触发Spinner，或者需要更精细的控制，可以手动维护一个请求计数器：

第一步：同样添加Spinner的HTML和CSS（和方案一一样） #

第二步：修改JS代码，添加计数逻辑 #

$(function () {
  let activeRequests = 0; // 记录当前活跃的AJAX请求数

  // 显示Spinner的函数
  function showSpinner() {
    if (activeRequests === 0) {
      // 只有当第一个请求发起时才显示Spinner
      $('#loadingSpinner').show();
    }
    activeRequests++;
  }

  // 隐藏Spinner的函数
  function hideSpinner() {
    activeRequests--;
    if (activeRequests === 0) {
      // 所有请求都完成了才隐藏Spinner
      $('#loadingSpinner').hide();
    }
  }

  // 初始化请求
  PageFunction_1();
  PageFunction_2();
  PageFunction_3();
  PageFunction_4();
});

// 修改每个PageFunction里的AJAX请求，添加beforeSend和complete回调
function PageFunction_1(){
  $.ajax({
    url : endpoint1,
    type : "post",
    async : true,
    beforeSend: function() {
      showSpinner(); // 请求发起前调用
    },
    success : function(data) {
      //load data to html divs
    },
    complete: function() {
      hideSpinner(); // 请求完成（无论成功失败）后调用
    }
  });
}

function PageFunction_2(){
  $.ajax({
    url : endpoint2,
    type : "post",
    async : true,
    beforeSend: function() {
      showSpinner();
    },
    success : function(data) {
      //load data to html divs
    },
    complete: function() {
      hideSpinner();
    }
  });
}

// ... 其他PageFunction同理修改

注意事项： #

• 用complete而不是success来触发hideSpinner，这样即使请求失败，Spinner也会正常隐藏，不会一直卡在页面上。
• Spinner的样式可以根据你的网站风格调整，比如颜色、大小、文字内容。
• 确保Spinner的z-index足够高，避免被页面其他元素遮挡。

内容的提问来源于stack exchange，提问作者Mert Özoğul