等待jQuery AJAX响应

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

提前致谢! 🙂

更新:

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

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

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

或者,如果您在arrays中拥有所有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 }); 

这种问题在数据库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个请求,您可能可以使用秒表实际测量节省时间!

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

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

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

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

 var i = 0;

 function myCallback(){
    警报('完成100次');
 }

 function doAjax(){
     $就({
         url:'blah.php',
        数据:'你好=世界',
        成功:function(响应){
            我++;
         },
        完成:function(){
             if(i <100){
                 doAjax();
             } else {
                 myCallBack函数();
             }
         }
     });
 }

 doAjax();  //开始

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

编辑:setTimeout()