Jquery ajax（）页面加载不会'；直到所有XHR完成加载后才能完成？

我对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

，以防由于一些奇怪的事情而与全局人发生任何有趣的混乱

我这样做对吗？我的页面是否应该加载而不考虑AJAX，然后当XHR出现时，这些项目将只是懒洋洋地填充

---

编辑-我只是注意到我的逻辑在静态调用中混乱；我可能需要一个闭包才能使$item正确地作用域，但这对于异步问题来说既不重要也不重要-它仍然会触发17个XHR，并等待它们全部返回，直到页面加载完成。

我相信您达到了最大请求数限制，因此，您的浏览器将等待更多线程可用。查看此线程：

我相信您的请求数已达到最大限制，因此您的浏览器正在等待更多线程可用。查看此线程：

一页中有十七个XHR请求？无论是否异步，您都应该尝试找到一种方法来组合其中的一些。如果两个或多个Ajax请求将使用不同的参数到同一个脚本，则应该能够重写服务器端代码以将它们全部传递到一个请求上，然后用jQuery解析客户端。您可以考虑更改代码以首先对所有数据文件进行迭代，同时将它们全部发送到服务器，然后处理返回的数据。很可能是$each循环和访问DOM的组合导致了问题，而不是ajax调用。访问dom（通过抓取每个元素、更改元素的内容或查看属性等）会导致页面速度缓慢。一个页面中有17个XHR请求？无论是否异步，您都应该尝试找到一种方法来组合其中的一些。如果两个或多个Ajax请求将使用不同的参数到同一个脚本，则应该能够重写服务器端代码以将它们全部传递到一个请求上，然后用jQuery解析客户端。您可以考虑更改代码以首先对所有数据文件进行迭代，同时将它们全部发送到服务器，然后处理返回的数据。很可能是$each循环和访问DOM的组合导致了问题，而不是ajax调用。访问dom（通过抓取每个元素、更改元素的内容或查看属性等）会导致页面速度变慢。哈！好的，杰克。我几乎可以肯定这就是问题所在。我从来没有想到可能会有一个限制多少线程可以出去。如果是这样的话，我需要重新考虑我的解决方案，因为我希望每个元素的内容在加载后立即显示（最终“淡入”）。如果我将所有元素批处理到一个Ajax请求中，那么在显示它们之前，我只能等待它们全部加载。这将感觉我的页面加载分为两个不同的阶段，而不是一个连续的、渐进的延迟加载…好吧，链接线程有很多可能的解决方案，可能对你有用。哈！好的，杰克。我几乎可以肯定这就是问题所在。我从来没有想到可能会有一个限制多少线程可以出去。如果是这样的话，我需要重新考虑我的解决方案，因为我希望每个元素的内容在加载后立即显示（最终“淡入”）。如果我将所有元素批处理到一个Ajax请求中，那么在显示它们之前，我只能等待它们全部加载。这将感觉我的页面加载分为两个不同的阶段，而不是一个连续的、渐进的延迟加载…好吧，链接线程有许多可能适合您的解决方案。