检测所有JQuery / JavaScript / Ajax调用何时完成

时间:2013-12-27 01:31:54

标签: javascript ajax jquery synchronous

我希望能够将一个脚本注入到一个页面中,该页面将检测是否还有“正在进行”。当我说继续时,我的意思是脚本仍处于执行状态,Ajax正在调用,或者页面尚未完全加载。原因是我需要检查是否存在各种元素(通过JQuery),然后用它做一些事情。我试图让它尽可能通用,因为我已经将它注入到包含各种内容的页面中。

显然使用.ready会在页面加载时告诉我:

 $( document ).ready(function() {...}); //Super easy!

我可以通过以下方式检测是否正在进行Ajax调用:

var AjaxInProgress= function (){return jQuery.active!=0;};

$( document ).ajaxStart(function() {
  console.log('Ajax stuff happening!');
});
$( document ).ajaxStop(function() {
  console.log('Ajax stuff finished!');
});

但是......如果这些Ajax调用同步发生,我得到的结果如下:

 Ajax stuff happening!
 Ajax stuff finished!
 Ajax stuff happening!
 Ajax stuff finished!
 Ajax stuff happening!
 Ajax stuff finished!
 Ajax stuff happening!
 Ajax stuff finished!

显然有一些JavaScript等待每个Ajax调用的结果然后再触发另一个,并且在前几个之后我得到一个“误报”,因为还有更多的事情发生。

有没有办法我可以一般性地检测所有脚本是否都在执行而没有任何东西在等待Ajax响应?显然,任何解决方案都必须避免竞争条件,并且不能满足长时间的轮询。

1 个答案:

答案 0 :(得分:1)

我已经做了一段时间了。请看一下这个链接:http://api.jquery.com/jQuery.when/

基本上,这样做:

var xhr1 = $.ajax( "/page1.php" );
var xhr2 = $.ajax( "/page2.php" );
$.when( xhr1 , xhr2 )
     .then( myFunc, myFailure );

这将在两个ajax请求成功时执行myFunc函数,或者如果其中一个有错误则执行myFailure。