【发布时间】：2011-11-15 04:12:42
【问题描述】：
我对 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 并在页面加载完成之前等待它们全部回家。
【问题讨论】：
-
一页中有 17 个 XHR 请求？异步与否，您应该尝试找到一种方法来组合其中的一些。如果两个或多个 AJAX 请求发送到具有不同参数的同一个脚本，您应该能够重写您的服务器端代码以在一个请求中将它们全部传递，然后使用 jQuery 在客户端解析它们。
-
您可能会考虑将代码更改为首先遍历所有数据字段，一次将它们全部发送到服务器，然后处理返回的数据。很可能是 $.each 循环和访问导致问题的 DOM 的组合而不是 ajax 调用。访问 dom（通过抓取每个元素、更改元素的内容或查看属性等）会导致页面出现缓慢问题。
标签： jquery ajax wordpress asynchronous xmlhttprequest