在所有XHR完成加载之前，jQuery.ajax（）页面加载没有完成？

我对Ajax很新，但我认为使用它的重点是'异步'部分。不幸的是，我似乎陷入了同步地狱。在所有XHR完成加载之前，jQuery.ajax（）页面加载没有完成？

在我的页面的早期，创建了许多元素，每个元素都有一个唯一的ID。

在页面的最后，我使用jQuery遍历每个元素并发出ajax（）调用（其中我明确地将'async'设置为true！）。目前完成，每个Ajax调用只是用一些文本输出填充相应的元素。最终它将是一个IMG。

发生的是我在页面上获得“忙”鼠标光标，并且某些元素在所有（17）XHR请求返回之前不会填充。

这里是我的jQuery的电话：

jQuery('.ajax-item').each(function(index){ 
    $item = jQuery(this); 
    ID = $item.attr('id'); 

    //$item.load(WPGlobals.ajaxurl, { 'action' : 'my-action', 'ID' : ID }); 
    jQuery.ajax({ 
     url : WPGlobals.ajaxurl, 
     type : 'POST', 
     async : true, 
     data : { 'action' : 'my-action', 'ID' : ID }, 
     success : function(response){ $item.html(response) } 
    }); 
});

看着这个代码（上图），你会注意到，这是一个WordPress站点（虽然我不知道这是什么将有什么关系），以及我也尝试了更简单的load()方法，并切换到ajax()，所以我可以强制async : true以防万一有些可怕的WP怪异导致Globals搞笑。

我对此有何看法？我的网页不应该加载，无论AJAX如何，那么当XHR进入时，这些项目只会延迟填充？

编辑 - 我只注意到我的逻辑在静态调用中被搞乱了;我可能需要一个闭包才能使$ item正确显示，但这并不是那里，也不是异步问题 - 它仍然会触发17个XHR并等待它们在页面加载完成之前回家。

来源

2011-11-14 Tom Auger

在一个页面中有17个XHR请求？异步与否，你应该尝试找到一种方法来结合其中的一些。如果两个或多个AJAX请求转到具有不同参数的相同脚本，您应该能够重写您的服务器端代码，以便在一个请求中传递它们，然后使用jQuery在客户端解析它们。 – Blazemonger

您可能会考虑更改代码以首先遍历所有数据字段，将它们一次全部发送到服务器，然后处理返回的数据。很可能它是$ .each循环和访问引起问题而不是ajax调用的DOM的组合。访问dom（通过获取每个元素，更改元素的内容或查看属性等）将导致页面中的缓慢问题。 – scrappedcola

我相信你正在达到最大数量的请求限制，所以你的浏览器正在等待更多的线程可用。看看这个帖子：How many concurrent AJAX (XmlHttpRequest) requests are allowed in popular browsers?

来源

2011-11-14 20:12:42

哈！好杰克。我几乎可以肯定，这是问题。我从来没有想过可能会有多少线程可以出局。如果出现这种情况，我需要重新考虑我的解决方案，因为我希望在加载后每个元素的内容都能够显示（最终“淡入”）。如果我将所有元素批量加入到一个Ajax请求中，那么我只需等待它们全部加载后再显示它们。这将感觉像我的网页加载在两个不同的阶段，而不是一个连续的，渐进的懒惰加载... –

那么，该链接的线程有一些可能的解决方案，可能适合你。 –

在所有XHR完成加载之前，jQuery.ajax（）页面加载没有完成？

回答

相关问题