Detect when all JQuery / JavaScript / Ajax calls are finished

Question

I want to be able to inject a script into a page that will detect if anything is still 'going on' or not. When I say going on, I mean scripts still in execution, Ajax calls in process, or the page not being fully loaded yet. The reason being I need to check if various elements exist (via JQuery) and then do something with it. I'm trying to get this as generic as possible, as I've be injecting this in to pages with all sorts of stuff in them.

Obviously using .ready will tell me when the page is loaded:

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

And I can detect if an Ajax call is going on with something like:

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

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

BUT... if these Ajax calls are happening synchronously I get results like:

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

So apparently there is JavaScript waiting for results from each Ajax call before firing off another one, and I get a 'false positive' after the first few because more is yet to happen.

Is there a way I can generically detect if all scripts have executing and nothing is waiting for an Ajax response? Obviously any solution would have to avoid a race condition, and it would not cater for long polling.

can create a promise array for all the calls....and run code whan all promises resolved. — charlietfl
– charlietfl, Commented Dec 27, 2013 at 1:40
@charlietfl, unfortunately I won't know what these calls are ahead of time, because I'll be injecting this script into many different pages that I don't have control of. Do you know of a way I can get a collection of these calls via JQuery? — Ben Power
– Ben Power, Commented Dec 29, 2013 at 22:59
if these calls are by other scripts you have no knowledge of there's no way to know ...what are you trying to accomplish? Also you can access the xhr object in ajaxComplete or ajaxStop...if that helps — charlietfl
– charlietfl, Commented Dec 29, 2013 at 23:04
@charlietfl, as I said above I am hoping to inject a script that can determine if any JavaScript or Ajax calls are still executing. This is for use in automated tests so we can see if our pages break. There are many, many pages that we are testing, written in different technologies (.Net Web Forms, PHP, Knockout, Angular etc.), but we get a lot of problems in testing for elements that might either not be there, or simply haven't appeared yet. This is what I am hoping to solve. If I can identify when all the Ajax calls have finished, it will make it much easier. — Ben Power
– Ben Power, Commented Dec 30, 2013 at 1:00
i doubt you can even see a request using jQuery to look for other library requests such as using $http in angular — charlietfl
– charlietfl, Commented Dec 30, 2013 at 1:08

Tuan · Accepted Answer · 2013-12-27 01:40:37Z

1

I've done this a while back. Take a look at this link: http://api.jquery.com/jQuery.when/

Basically, do this:

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

This would execute the function myFunc when both ajax requests are successful, or myFailure if either one has an error.

answered Dec 27, 2013 at 1:40

Tuan

1,48613 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

charlietfl Over a year ago

can also be expanded into using array of promises if have loops creating calls, and $.when.apply(null, promiseArray).then...

Ben Power Over a year ago

Thanks Tuan, but I'm not sure that will work in my case, because I don't know of all the Ajax calls that are going to be made (see the last sentence in the first paragraph). If I could get the collection of current Ajax calls and their states it would help. Any idea?

Collectives™ on Stack Overflow

Detect when all JQuery / JavaScript / Ajax calls are finished

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related