如何实现无需等待地异步加载多个Partial View至Div中？

你遇到的这个问题其实很常见，核心原因大概率是你之前的JavaScript调用方式导致了串行执行，而非load方法本身的限制。咱们一步步拆解解决：

首先明确：jQuery的load()方法默认就是异步的，只要你不刻意嵌套回调或强制同步，浏览器完全可以同时发起多个请求。

为什么你之前会等待第一个方法完成？ #

如果你的代码是类似下面这种嵌套回调的写法，那必然会串行执行——必须等第一个请求处理完毕，才会发起第二个：

$("#div1").load("/Controller/Partial1", function() {
  $("#div2").load("/Controller/Partial2", function() {
    // 继续嵌套第三个、第四个...
  });
});

这种写法会强制请求按顺序执行，自然会出现等待的情况。

正确的并行加载写法 #

只需要把每个load()调用平级写出来，不需要嵌套回调，浏览器会立即发起所有请求，它们会并行处理、互不等待：

// 直接平级调用，所有请求同时发起
$("#partialDiv1").load("/Home/PartialView1");
$("#partialDiv2").load("/Home/PartialView2");
$("#partialDiv3").load("/Home/PartialView3");
$("#partialDiv4").load("/Home/PartialView4");

这样写的话，即便你的控制器Action里加了Thread.Sleep，四个请求也会同时被发送到服务器，服务器会分别处理这些请求（默认线程池配置完全支持并发），客户端不会等待第一个完成才发起下一个。

可选：统一处理所有加载完成的逻辑 #

如果你需要在所有Partial View都加载完成后执行某些操作（比如隐藏全局加载动画），可以用$.when()来监听所有请求的完成状态：

// 保存每个load请求的Deferred对象
var req1 = $("#partialDiv1").load("/Home/PartialView1");
var req2 = $("#partialDiv2").load("/Home/PartialView2");
var req3 = $("#partialDiv3").load("/Home/PartialView3");
var req4 = $("#partialDiv4").load("/Home/PartialView4");

// 当所有请求都完成时执行回调
$.when(req1, req2, req3, req4).done(function() {
  console.log("四个Partial View全部加载完成！");
  // 这里可以写统一的后续逻辑
});

额外注意事项 #

• 浏览器有并发请求数限制（同一域名下最多6个），你的四个请求完全在这个范围内，不用担心受限制。
• 确保控制器Action没有设置同步相关配置，保持默认的异步处理即可。
• 检查代码里有没有$.ajaxSetup({ async: false })这类配置，它会强制所有AJAX请求变成同步，也会导致等待。

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