18

我有一个页面，使用 jQuery .ajax 调用 100 次（异步：true），问题是，当它们都被加载时，我需要系统等待所有 100 个调用返回，然后再继续。我该怎么办？

提前致谢！:)

更新：

这些调用是在 for() 循环中进行的（其中有 100 个 :)）

4

5 回答 5

36

这样做的好方法是使用$.when. 您可以按如下方式使用它：

$.when(
    $.ajax({/*settings*/}),
    $.ajax({/*settings*/}),
    $.ajax({/*settings*/}),
    $.ajax({/*settings*/}),
).then(function() {
    // when all AJAX requests are complete
});

或者，如果您将所有 AJAX 调用放在一个数组中，您可以使用apply：

$.when.apply($, ajaxReqs);

请注意，这至少需要 jQuery 1.5。

要将 AJAX 请求添加到数组，请执行以下操作：

var ajaxReqs = [];
for (var i = 0; i < 100; i++) {
    ajaxReqs.push($.ajax({
        /* AJAX settings */
    });
}
$.when.apply($, ajaxReqs).then(function() {
    // all requests are complete
});
于 2011-06-06T09:35:41.997 回答
4

这种问题在数据库 SQL 设计中随处可见——尽管并不完全相同——但问题正是你会遇到的问题：网络通信。

您需要注意它，因为如果您没有正确执行它，它会回来咬您 - 即用户会因等待而感到非常恼火。我怎么强调都不过分。

场景如下：您希望根据请求从服务器传输许多小信息片段。每个请求都取决于许多有效运行的因素。所有这些都在您的控制之外：

Wide area Network reposnse time (anywhere in the world right?)
Locak area Network reposnse time (anywhere in the building)
WebServer Load
WebServer Response time
Database response time
Backend Script run time
Javascript run time to process the result
The fact that the browsers are generally limited to 6-8 parallel AJAX requests at once (I think - someone correct me on the exact number)

乘以请求（呃......在你的情况下x 100）

得到图片？

它可能在本地机器上的测试中运行良好。您甚至可能在完全相同的机器上运行您自己的数据库和网络服务器......但是在野外尝试一下，不久您就会遇到不可靠性问题。

听着，最简单的做法是将所有参数包装到一个 JS 数组中，然后在一个 POST 请求中发送。然后在服务器上执行所有数据库选择并将响应汇总到一个 JSON/XML 响应中。

那时您只需要等待一个 AJAX 响应。您可以在 JSON/XML 结果中找到所有数据。

鉴于您正在处理 100 个请求，您可能能够使用秒表实际测量节省的时间！

从我这里拿走 - 做尽可能少的网络请求。

于 2011-06-06T09:51:28.157 回答
3

您可以使用延迟对象 api。只要 $.ajax 返回延迟对象，您就可以尝试以下代码来使用循环：

var ajaxes = [];
for (i = 1; i < 100; i++) {
  ajaxes[i] = $.ajax({/*data*/});
}

$.when.apply( ajaxes )
   .then(function(){
      console.log( 'I fire once all ajax requests have completed!' );
   })
   .fail(function(){
      console.log( 'I fire if one or more requests failed.' );
   });

PS Eric Hynds 有一篇关于使用延迟对象的精彩文章Using Deferreds in jQuery 1.5

于 2011-06-06T09:36:40.610 回答
2

100个阿贾克斯电话？似乎是一个非常奇怪的要求，您尝试实现的目标很可能使用另一种方法来实现：

变量 i = 0;

函数 myCallback() {
    alert('已完成 100 次');
}

函数 doAjax() {
    $.ajax({
        网址：'blah.php'，
        数据：'你好=世界'，
        成功：功能（响应）{
            我++；
        },
        完成：函数（）{
            如果（我 < 100）{
                doAjax();
            } 别的 {
                我的回调（）；
            }
        }
    });
}

doAjax(); // 开始
于 2011-06-06T09:40:26.023 回答
0

我不是 JS 人，但我会创建一个全局变量，这将是计数器，并定义一个定时函数来定期检查这个全局变量是否达到 100。

编辑：setTimeout()

于 2011-06-06T09:35:31.823 回答