等待jQuery AJAX响应


Waiting for jQuery AJAX response(s)

本问题已经有最佳答案，请猛点这里访问。

我有一个页面，使用被称为100次的jQuery .ajax(async：true)，问题是，当它们全部被加载时，我需要系统在继续之前等待所有100个调用返回。 我该怎么做？

提前致谢！:)

更新：

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

相关讨论

执行此操作的好方法是使用$.when。您可以按如下方式使用：

1
2
3
4
5
6
7
8
$.when(
    $.ajax({/*settings*/}),
    $.ajax({/*settings*/}),
    $.ajax({/*settings*/}),
    $.ajax({/*settings*/}),
).then(function() {
    // when all AJAX requests are complete
});

或者，如果您在阵列中拥有所有AJAX调用，则可以使用apply：

1
$.when.apply($, ajaxReqs);

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

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

1
2
3
4
5
6
7
8
9
var ajaxReqs = [];
for (var i = 0; i < 100; i++) {
    ajaxReqs.push($.ajax({
        /* AJAX settings */
    });
}
$.when.apply($, ajaxReqs).then(function() {
    // all requests are complete
});
相关讨论

这种问题在数据库SQL设计中无处不在 - 虽然它并不完全相同 - 但问题正是让你得到的东西：网络通信。

你需要注意它，因为如果你没有正确地做它会回来咬你 - 即用户会非常恼火等待。我不能强调这一点。

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

1
2
3
4
5
6
7
8
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)

得到图片？

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

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

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

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

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

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
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.' );
   });

附：关于在jQuery 1.5中使用Eric Hynds使用Deferreds的延迟对象有一篇很棒的文章

相关讨论

100个Ajax电话？似乎有一个非常奇怪的要求，你可能很难用另一种方法实现你想要实现的目标：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var i = 0;

function myCallback() {
    alert('Completed 100 times');
}

function doAjax() {
    $.ajax({
        url: 'blah.php',
        data: 'hello=world',
        success: function(response) {
            i++;
        },
        complete: function() {
            if(i < 100) {
                doAjax();
            } else {
                myCallback();
            }
        }
    });
}

doAjax(); // start
相关讨论

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

编辑：setTimeout()

相关讨论