在执行回调之前等待 .each() .getJSON 请求完成答案

【问题标题】：Wait for .each() .getJSON request to finish before executing a callback在执行回调之前等待 .each() .getJSON 请求完成
【发布时间】：2011-06-24 12:34:21
【问题描述】：

我有一个 jquery .each 循环，它从 json 请求中检索具有特定类的页面上所有元素的远程数据。一组元素是一组li 标签，在li 元素已使用远程信息更新后，我想使用另一个函数对其进行排序。

在.each 循环之后传入排序函数不会对列表进行排序，因为项目尚未从 json 请求完成加载。如果我将 sort 函数作为 getJSON 请求的 .complete 回调传入，但我只希望排序对整个列表运行一次，而不是对每个项目运行一次。

fetch_remote_data(function(){sort_list_by_name();});

function fetch_remote_data(f){
jQuery('.fetching').each(function(){
   var oj = this;
   var kind = this.getAttribute('data-kind');
   var url = "http://something.com"
   jQuery.getJSON(url, function(json){
       $(oj).text(json[kind]);
       $(oj).toggleClass('fetching');
   });
});
 if (typeof f == 'function') f();
};

有什么建议吗？

【问题讨论】：

标签： jquery callback delay getjson

【解决方案1】：

如果你使用的是 jQuery 1.5，你可以利用它的 $.Deferred 实现：

function fetch_remote_data(f) {
  var requests = [],
      oj = this,
      url = "http://something.com";

  $('fetching').each(function() {
    var request = $.getJSON(url, function(json) {
      $(oj).text(json['name']);
      $(oj).toggleClass('fetching');
    });

    requests.push(request);
  });

  if (typeof f === 'function') 
    $.when(requests).done(f);
}

// No need to wrap this in another function.
fetch_remote_data(sort_list_by_name);

我假设您示例中的 $('fetching') 位不是真正的代码？该选择器将在 DOM 中搜索 <fetching> 元素，这可能不是您想要的。

【讨论】：

长期以来对 jquery 的最佳更改之一。 +1
我意识到我的代码中有错字，应该是 $('.fetching')。我正在 DOM 中搜索所有具有 .fetching 类的元素，然后发出远程请求并替换该元素的文本。

【解决方案2】：

尝试在触发 each() 之前获取要执行的提取总数。比附加 .complete 回调，您首先在其中增加一些已完成请求的计数，并且仅当已完成的数量等于要执行的总数时才进行排序。原则上，您应该只在所有调用的 ajax 完成后才运行排序...K

【讨论】：