How do I find whether all ajax requests are completed and each request returned data from server to HTML using Javascript and/or JQuery?

Question

I need to perform some slideup and slidedown animations in my DOM (HTML page). The number of AJAX requests may vary in each page.

My question is, How do I know whether all AJAX requests in a page has completed and each request completed returning data from server to HTML?

Once I get this done, I can perform my animations after these things in DOM.

Without your code I can only recommend some concepts ... one concept is Promises and `Promise.all` - another concept is a count of pending ajax calls, when it hits 0 then all calls are done — Jaromanda X, Mar 16 '16 at 05:35

score 0 · Answer 1 · edited May 23 '17 at 12:15

0

-- Updated after comment discussion --

I would fire all my ajax in the same section.

$.when(
    $.ajax(), // some ajax
    $.ajax() // some more ajax
    // etc etc for all
).then(function() {
    // play animations here
});

This way you fire them all at the start once they are all done the then will execute.

-- Old alternate Awnser --

I had a similar issue a while back have a read throught this:

Stoping jquery .then chain via user input.

Basicly you want to chain your ajax responses.

Also read up here: http://api.jquery.com/queue/

edited May 23 '17 at 12:15

Community

1
1

answered Mar 16 '16 at 05:33

Spaceman

1,319
13
42

that's the slow way of doing things - sequential ajax – Jaromanda X Mar 16 '16 at 05:33
Doesnt have to be you can create indepentent queues or chains depending on the desired result. – Spaceman Mar 16 '16 at 05:34
so, multiple parallel queues is easier to work with than multiple single calls? – Jaromanda X Mar 16 '16 at 05:35
Depends what you want i wouldnt say its easier but if you have server ajax calls that on result fire more ajax calls I prefer chains but again its case dependant. – Spaceman Mar 16 '16 at 05:36
Re reading the question i think your correct in saying a chain is slow. – Spaceman Mar 16 '16 at 05:37
1

I'd say your answer will not help too much ... next question would be (I predict) ... "how do I know when all queues are done" :p – Jaromanda X Mar 16 '16 at 05:38

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

I am not sure this is what you are after but you can check how many AJAX calls are active using

$.active

so if there are none all AJAX calls have finished, and you can check here for more info.

And you could use the success and error properties of your AJAX calls to build in checks to ensure they are returning etc.

edited May 23 '17 at 11:50

Community

1
1

answered Mar 16 '16 at 05:45

Myshkin

96
5

score -1 · Answer 3 · answered Mar 16 '16 at 05:59

I suggest you to create a flag variable like say ajaxRequest = true and then change this variable to false whenever an ajax request is failed. Then do your things on behalf of this variable, like:

if(!!ajaxRequest){
  //if all the ajax are sucessfull.
}else{
  //if any of them fails.
}

How do I find whether all ajax requests are completed and each request returned data from server to HTML using Javascript and/or JQuery?

3 Answers3