JQuery 多个 .load() 函数一次加载一个与异步加载答案

【问题标题】：JQuery Multiple .load() Functions Loading One at a Time vs. AsynchronouslyJQuery 多个 .load() 函数一次加载一个与异步加载
【发布时间】：2019-04-17 05:17:48
【问题描述】：

我正在尝试使用 jQuery .load() 将 4 个文件加载到单个页面上。问题是，它们不会异步加载。相反，每个文件一次加载一个，导致我的页面加载速度慢得多。

这是我的代码：

$( "#list1" ).load( 'list1.php' );
$( "#list2" ).load( 'list2.php' );
$( "#list3" ).load( 'list3.php' );
$( "#list4" ).load( 'list4.php' );

这是一个来自 Chrome 调试器的示例：

【问题讨论】：

问题可能出在您的测试服务器上，而不是您的 JavaScript 代码。您的屏幕截图显示，所有四个请求基本上是在同一时间（绿色条的左边缘）启动的，正如预期的那样。但是您的服务器响应每个请求的时间越来越长。你的测试服务器是什么？
@MichaelGeary 测试服务器是一个 EC2 实例，我使用 C9 作为 IDE。我将对此进行更多调查，但感谢您提供任何帮助。
有趣。我会尝试的一件事是加载一些静态测试文件而不是 .php 文件，看看它的行为是否不同。
@MichaelGeary 我发现 Guzzle 很可能是罪魁祸首。正在修复并将更新此帖子。

标签： jquery performance asynchronous

【解决方案1】：

尝试使用 jQuery.get() 函数“同时”加载文件，然后将它们加载到您的选择器。

$.get( "list1.php", function( data ) {
  $( "#list1" ).html( data );
});
$.get( "list2.php", function( data ) {
  $( "#list2" ).html( data );
});
$.get( "list3.php", function( data ) {
  $( "#list3" ).html( data );
});
$.get( "list4.php", function( data ) {
  $( "#list4" ).html( data );
});

或使用：

$.each(['list1.php','list2.php',...'listx.php'],function(index,file) {
      $.get(file, ...);
});

更多信息可以找到here

【讨论】：

这应该没什么区别。 .load() 和 .get() 一样是异步的。这里一定有其他事情发生，也许是 OP 的测试服务器有问题？
更具体地说，.load() 和 .get() 都是 jQuery.ajax() 的简单包装器。 .load() 提供自己的回调，而您为 .get() 提供回调，但它们的工作方式相同。