jQuery 每个都有超时答案

【问题标题】：jQuery each with timeoutjQuery 每个都有超时
【发布时间】：2013-01-06 23:17:19
【问题描述】：

我有以下功能运行正常，除了一件事。它首先附加的内容没有任何后果。

(function biograf(){
  var placeholder = $('#top-imageholder');
  $('ul#biomenu > li').each(function(){
    var obj = $(this);
    var pageLink = obj.find('a:first').attr('href');
    $.get(pageLink, function(data) {
      placeholder.append( $(data).find('#top-imageholder').html() );
      placeholder.append( $(data).find('#top-imageholder').siblings('ul') );
    });
  });
})();

我希望该函数按照我的列表项在#biomenu 中的放置顺序附加占位符。

90% 的时间它都会这样做，但偶尔会以不同的顺序附加。

有什么建议吗？

【问题讨论】：

你在任何地方都使用setTimeout吗？
您可能想重新命名这个问题。没有超时，而是异步.get()。订单被异步性打败了。
您应该考虑将所有页面链接捆绑到一个请求中，并让服务器组成整个响应。这将解决问题并避免大量近乎同时的请求轰炸服务器。
我知道代码中没有超时，我写它可能会让人困惑，但我的意思是可以在函数中设置超时来解决问题.

标签： jquery get settimeout each

【解决方案1】：

使用$.when 订购结果（未经测试的代码）：

(function (){

  var placeholder = $('#top-imageholder');
  var promises = [];

  $('ul#biomenu > li').each(function(){
    var obj = $(this);
    var pageLink = obj.find('a:first').attr('href');
    promises.push($.get(pageLink));
  });

  $.when.apply(null, promises).done(function() {
    $.each(arguments, function(data) {
      placeholder.append( $(data).find('#top-imageholder').html() );
      placeholder.append( $(data).find('#top-imageholder').siblings('ul') );
      return true;
    });
  });

})();

【讨论】：

【解决方案2】：

它可以使用以下代码：

(function biograf(){
  var placeholder = $('#top-imageholder');
  var item = $('ul#biomenu > li');
  var index = 0;

  (function loop(){
    setTimeout(function(){
      var pageLink = item.eq(index).find('a:first').attr('href');
      if( pageLink != undefined ){
        $.get(pageLink, function(data) {
          placeholder.append( $(data).find('#top-imageholder').html() );
          placeholder.append( $(data).find('#top-imageholder').siblings('ul') );
        });     
        index++;
        loop();
      }
    });
  })();
})();

我不确定这是否是最佳方式，或者代码是否可以调整。但它有效！ :)

谢谢大家的回复！

【讨论】：

+1 因为它是适合您的解决方案。当然，如果任何电话需要更长的时间才能回来，这可能会再次搞砸。在最坏的情况下，您总是可以将 $.get 更改为带有 async option = false 的 $.ajax（最后的手段，因为 async = false 每次调用都会停止 UI）
不会 $.ajax 选项 async=false 与 $.get 相同，或者你的意思是什么不同？
$.get 异步执行。由于$.get 只是$.ajax({url: url, data: data, success: success, dataType: dataType}); 的简写，使用$.ajax 将允许您指定async: false 选项，该选项将执行请求synchronous 而不是asynchronous，这意味着它将等待请求返回，然后再继续执行。虽然这可以解决与您类似的问题，但它不是处理它的首选方式，因为synchronous 执行将锁定 UI 直到请求完成，如果请求挂起，可能会冻结 UI服务器。
更多信息在这里：api.jquery.com/jQuery.ajax，查看async选项的注释。同样，这不是一个好的解决方案，如果你真的卡住了，只是一个替代方案。
setTimeout() 和 async:false 都不是一个好的解决方案。第一个不能保证工作，第二个不能完全跨浏览器。在问题下的 cmets 中查看我的建议。