如何实现由不同事件触发的jQuery异步Ajax并行调用

你的问题其实很常见——当Ajax请求被分散在不同事件/函数里触发时，想让它们并行执行而不是串行等待，同时还能灵活管理这些请求对吧？

首先先明确一个关键点：jQuery的$.ajax()默认就是异步并行的，只要你没有手动把async参数设为false，也没有把后续请求嵌套在前一个请求的done()回调里，这些请求本来就会同时发起，不会互相阻塞。所以如果之前页面加载慢是因为串行执行，大概率是你的代码里不小心写了串行逻辑（比如在一个请求完成后才发起下一个）。

那针对你说的「请求由不同独立事件/函数触发，没法放进单个$.when()」的场景，我们可以用一个全局数组来收集所有请求的Deferred对象，既不影响每个请求独立触发，又能在需要时统一等待所有请求完成。下面是具体的实现方案：

步骤1：创建全局数组存储Deferred对象 #

先声明一个数组，用来保存每个Ajax请求返回的Deferred（$.ajax()本身就会返回一个Deferred对象）：

// 全局变量，用来收集所有Ajax请求的Deferred
const activeAjaxRequests = [];

步骤2：每个独立触发的Ajax请求，都把Deferred加入数组 #

不管是页面加载时触发，还是按钮点击、其他交互触发的请求，发起时都把返回的Deferred对象push到数组里：

// 示例1：页面加载完成时发起的请求
$(document).ready(function() {
  const userDataReq = $.ajax({
    url: '/api/user-profile',
    method: 'GET'
  }).done(function(data) {
    // 填充用户信息
    $('#user-profile').html(`<h2>${data.name}</h2>`);
  }).fail(function(xhr) {
    console.error('加载用户信息失败', xhr.responseText);
  });
  
  // 把这个请求的Deferred加入数组
  activeAjaxRequests.push(userDataReq);
});

// 示例2：点击按钮触发的请求
$('#btn-load-products').on('click', function() {
  const productsReq = $.ajax({
    url: '/api/products',
    method: 'GET'
  }).done(function(data) {
    // 填充产品列表
    const productHtml = data.map(item => `<li>${item.name}</li>`).join('');
    $('#product-list').html(productHtml);
  }).fail(function(xhr) {
    console.error('加载产品列表失败', xhr.responseText);
  });
  
  activeAjaxRequests.push(productsReq);
});

步骤3：（可选）等待所有请求完成后执行统一操作 #

如果需要在所有Ajax请求都完成后做一些事情（比如隐藏加载动画、显示“全部加载完成”提示），可以用$.when.apply()来处理数组里的所有Deferred：

// 比如在某个时机调用这个函数，等待所有请求完成
function waitForAllAjax() {
  // 用apply把数组转成$.when的参数
  $.when.apply($, activeAjaxRequests)
    .done(function() {
      console.log('所有Ajax请求都成功完成了！');
      $('#loading-overlay').fadeOut();
    })
    .fail(function() {
      console.log('至少有一个Ajax请求失败了');
    });
}

// 示例：比如页面加载一段时间后，或者用户触发某个动作时调用
$('#btn-check-loading').on('click', waitForAllAjax);

关键注意事项 #

1. 避免串行逻辑：检查你的代码，不要把新的Ajax请求放在前一个请求的done()/success()回调里，这样会强制串行执行，拖慢加载速度。
2. 浏览器并发限制：注意同一域名下，浏览器一般允许同时发起6-8个请求，超过的会排队等待。如果你的请求数量特别多，可以考虑合并部分请求，或者用域名分片（不过这是进阶优化了）。
3. 错误处理：每个请求的fail()回调可以单独处理该请求的错误，而全局的$.when().fail()会在任意一个请求失败时触发，根据你的需求选择。

这样调整后，所有触发的Ajax请求都会并行发起，页面加载速度会明显提升，同时你还能灵活管理这些分散的请求~

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