jquery .each() .load() 等待完成答案

【问题标题】：jquery .each() .load() wait for completionjquery .each() .load() 等待完成
【发布时间】：2012-10-01 23:34:36
【问题描述】：

我正在使用 jquery 将行加载到表中，我想知道如何让它们一一加载；即第二个块只有在第一个块完成加载后才开始加载。

我的桌子有点像这样：

<table id="dynamicTable">
  <thead>
    <tr>
      <th>Heading</th>
      ...
    </tr>
  </thead>
  <tbody id="1">
  </tbody>
  <tbody id="2">
  </tbody>
</table>

而我的 jquery 看起来有点像这样：

$("table#dynamicTable tbody").each(function() {
  $(this).load("filethatgeneratestablerows.php");
});

（它比这更复杂一点，因为它基于 tbody id 生成内容，并且还包括一个复选框系统来选择您想要影响的 tbody 元素，但是一切正常，所以我将它剥离到让我的实际问题更明显！）

【问题讨论】：

如果您希望$.each 有效地以 1 的方式加载（至少，在没有类似队列的系统的情况下），则不能使用它们。为什么要单独加载每一行？这是很多要求..
@Shmiddty：“我想知道如何让它们一个一个地加载”——这就是问题所在。对我来说似乎是一个非常简单的问题。看起来所需要的只是解释异步调用的工作原理以及如何解决这个问题以让它做他想做的事情。
感谢大家的建议，我已经实现了@user1689607 的回答，而且效果很好。

标签： javascript jquery

【解决方案1】：

var bodies = $("table#dynamicTable tbody"),
    i = 0;

(function loadBody() {
   bodies.eq(i++).load("filethatgeneratestablerows.php", loadBody);
})();

这会在集合的每个索引上一次调用一个加载。当一次加载完成后，它会再次调用loadBody，使用递增的索引。

当i 大于最后一个时，.eq() 将返回一个空的 jQuery 对象，因此序列将在那里结束。

【讨论】：

整洁。我在想类似的东西，但你的解决方案更优雅。
这看起来就是我想要的 - 我现在就试试

【解决方案2】：

您需要创建一个数组来存储各种 tbodies。从第一个开始并运行负载。完成后，将第一个取出的阵列通过。所以你像这样传递：

[1, 2, 3, 4] [2, 3, 4] [3, 4] [4] []

然后你不断调用一个加载函数，该函数接受一个数组，加载第一个元素，然后传递剩余的元素或不传递任何元素。

前：

loadElement( $("table#dynamicTable tbody") );

function loadElement( $elements ) {
    $elements.load( "filethatgeneratestablerows.php",
            loadElement( $elements.filter(":gt(0)") ) );
}

【讨论】：

我认为这是一个很好的答案，但我认为您应该使用代码示例进行详细说明。

【解决方案3】：

你可以做一个

$("table#dynamicTable #1").load("filethatgeneratestablerows.php", function(event) {
     $("table#dynamicTable #2").load("filethatgeneratestablerows.php", function(event) {
        ....
     });
  });
});

没有经过测试，但你应该明白了

【讨论】：

正如 jholloman 所说，您还可以将选择器存储到一个数组中，对其进行迭代，并在每次完全触发时执行下一个 .load。或者在这里查看同步 ajax：stackoverflow.com/questions/133310/…