等待jQuery AJAX响应

时间:2011-06-06 09:30:02

标签: ajax jquery jquery-deferred

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

提前致谢! :)

更新

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

5 个答案:

答案 0 :(得分: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
});

答案 1 :(得分: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)

拍照?

在本地计算机上进行测试时,它可能会很有效。你甚至可能在完全相同的机器上运行你自己的数据库和网络服务器...但是在野外尝试,不久就会出现不可靠性问题。

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

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

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

从我这里拿走它 - 尽量少做网络请求。

答案 2 :(得分:3)

您可以使用Deferred object 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.' );
   });

P.S。关于使用Eric Hynds Using Deferreds in jQuery 1.5

的延迟对象,有一篇很棒的文章

答案 3 :(得分:2)

100个Ajax电话?似乎有一个非常奇怪的要求,你可能很难用另一种方法实现你想要达到的目标:

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

答案 4 :(得分:0)

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

编辑:setTimeout()