javascript - Ajax jQuery.when() 与 each() 循环

Question

有一个动态数量的元素具有 data-url 属性，其中包含返回其 HTML 内容的 ajax 调用的 URL。

<div class="element" data-url="data1.php"></div>
<div class="element" data-url="data2.php"></div>
<div class="element" data-url="data3.php"></div>
...

我需要通过 AJAX 加载他们的内容，并在完成后用它做一些事情。

我认为我不能使用 .ajaxStop()，因为在这些调用之后会有更多不同的 ajax 调用，我等不及它们都完成了。

所以我尝试使用 jQuery.when() 和 .each() 循环遍历所有元素并加载它们的内容，但是 .done() 函数在循环中的所有 ajax 调用完成之前触发。

$.when(
    $('.element').each(function() {
        var el = $(this);
        $.get($(el).data('url'), function(data) {
            $(el).html(data);
        });
    })
).done(function() {
    // do something after all calls are finished
});

Answer 1

您的逻辑问题在于 each() 返回一个 jQuery 对象。因为这不是 promise $.when() 会立即解析并且 done() 在所有/任何您的 $.get 之前被调用请求已完成。

要解决此问题，请从 $.get() 调用中创建一个 promise 数组，并将它们应用于 $.when()。试试这个:

var promises = $('.element').map(function() {
  var $el = $(this);
  return $.get($el.data('url'), function(data) {
    $el.html(data);
  });
}).get()

$.when.apply($, promises).done(function() {
  // do something after all calls are finished
});

另请注意，虽然这可行，但可能会在循环中用请求淹没您的服务器，这不是可扩展的解决方案。更好的模式是将 .element 元素中的所有 data-url 属性聚合到单个请求中，然后在此请求完成后手动更新 DOM。