如何让jQuery等待所有Ajax请求完成后再显示内容？

你说得没错，确实需要用异步控制方案来处理这种多个Ajax请求的等待问题。因为Ajax请求是异步执行的，你当前的代码里$("content_loader").fadeOut(...)会在三个get_values调用后立刻执行，这时候三个请求大概率还没完成，data_1、data_2、data_3可能还没被赋值，导致显示内容异常。

推荐方案：使用$.when()统一管理多个Ajax请求 #

jQuery提供了$.when()方法，可以监听多个Deferred对象（比如$.ajax()返回的jqXHR对象），当所有请求都成功完成后，再执行后续逻辑。我们可以修改你的代码，让get_values函数返回Ajax请求的jqXHR对象，然后用$.when()等待所有请求完成：

/* Get Values */ 
function get_values(id){ 
  var settings = { 
    "async": true, 
    "crossDomain": true, 
    "url": "example.com", 
    "method": "GET", 
    "headers": { 
      "Accept": "application/json", 
    }, 
    "dataType" : "json", 
    "mimeType": "multipart/form-data", 
  }; 
  // 返回Ajax请求的jqXHR对象，供$.when监听
  return $.ajax(settings).done(function (response) { 
    window['data_' + id] = response; 
  }); 
} 

// 发起三个请求，用$.when等待全部成功完成
$.when(get_values(1), get_values(2), get_values(3))
  .done(function() {
    // 所有请求完成后再执行加载动画淡出和内容渲染
    $("content_loader").fadeOut(function() { 
      $("main_container").html('<div class="results">' + data_1 + data_2 + data_3 +'</div>'); 
    }); 
  })
  .fail(function() {
    // 可选：处理任意一个请求失败的情况
    console.error("某个Ajax请求失败，请检查网络或接口");
  });

关键说明： #

• $.ajax()本身会返回jqXHR对象（属于Deferred类型），让get_values返回这个对象，就能让$.when()监听请求状态。
• $.when()会等待所有传入的请求都进入成功状态，才触发.done()回调；如果任意一个请求失败，会触发.fail()回调，你可以在这里添加错误提示逻辑。
• 这样就能确保只有三个请求都成功拿到数据后，才会执行加载动画淡出和内容渲染，完美解决时序问题。

替代方案：原生Promise.all() #

如果更倾向于原生JavaScript标准，也可以用Promise.all()来实现，因为jQuery的Ajax请求也可以当作Promise使用：

function get_values(id){ 
  var settings = { 
    "async": true, 
    "crossDomain": true, 
    "url": "example.com", 
    "method": "GET", 
    "headers": { 
      "Accept": "application/json", 
    }, 
    "dataType" : "json", 
    "mimeType": "multipart/form-data", 
  }; 
  // 将jqXHR转为原生Promise，并存储返回数据
  return $.ajax(settings).then(function(response) {
    window['data_' + id] = response;
    return response;
  });
}

// 用Promise.all等待所有请求完成
Promise.all([get_values(1), get_values(2), get_values(3)])
  .then(function() {
    $("content_loader").fadeOut(function() { 
      $("main_container").html('<div class="results">' + data_1 + data_2 + data_3 +'</div>'); 
    }); 
  })
  .catch(function(err) {
    console.error("请求失败:", err);
  });

这两种方案都能满足你的需求，$.when()更贴合jQuery生态，Promise.all()是原生标准，兼容性在现代浏览器中都很好。

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