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

发布于 2024-11-17 02:02:14 字数 724 浏览 2 评论 0原文

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

在 .each 循环之后传入排序函数不会对列表进行排序，因为项目尚未完成从 json 请求的加载。如果我将排序函数作为 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();
};

有什么建议吗？

原文

I have a jquery .each loop that retrieves remote data from a json request for all the elements on a page with a certain class. One set of the elements is a group of li tags that I would like to sort using another function after the li element has been updated with the remote information.

Passing in the sort function after the .each loop does not sort the list because the items have not finished loading from the json request. The sorting works If I pass in the sort function as a .complete callback for the getJSON request but I only want the sort to run once for the whole list, not for each item.

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();
};

Any suggestions?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

锦上情书 2024-11-24 02:02:14

如果您使用的是 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 中搜索元素，这可能不是您想要的。

If you're using jQuery 1.5, you could take advantage of its $.Deferred implementation:

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);

I'm assuming the $('fetching') bit in your example isn't real code? That selector would be searching for <fetching> elements in the DOM, which probably isn't what you want.

回复收藏 0 原文