Question

I have a difficulty to know when all Ajax requests are completed because I need this information to call another function. Difficulty are to know when my 4/5 function with requests are completed. I use native function of ajax and none is working for me. I used Chrome, and async requests.

Someone Helps me

I use this(not work):

$(document).ajaxStop(function() {
  alert("Completed");
});

and this (not Work):

$(document).ajaxComplete(function() {   alert("Completed"); });

Both ways I try use in another function thal calls all requests: Example:

function Init() 
{  Search("123");  Search2("1234");  Search3("12345");
... }

Extract one (of 5 requests,others are very similar ) of my request:

function Search(user) {
    $.ajax({
        url: 'www.example.com/' + user,
        type: 'GET',
        async: true,
        dataType: 'JSONP',
        success: function(response, textStatus, jqXHR) {
            try {
                if (response != null) {
                    alert("Have Data");
                } else {
                    alert("are empty");
                }
            } catch (err) {
                alert("error");
            }
        },
        error: function() {
            alert("error");
        }
}); }

Someone helps me? Thanks

Answer 1

have you tried putting it in a done function? something like...

$.ajax({ 
        url: 'www.example.com/' + user,
        type: 'GET',
        async: true,
        dataType: 'JSONP'
    }).done(function (data) {
        code to execute when request is finished;
    }).fail(function () {
       code to do in event of failure
    });

bouncing off what Michael Seltenreich said, his solution, if i understand where you guys are going with this...might look something like:

    var count = 0;

function checkCount(){
 if(count == 5 ){
    //do this, or fire some other function 
 }
}
#request one
 $.ajax({
        url: 'www.example.com/' + user,
        type: 'GET',
        async: true,
        dataType: 'JSONP',
    }).done( function(data){
        count += 1
        checkCount()
        })

 #request two
 $.ajax({
        url: 'www.example.com/' + user,
        type: 'GET',
        async: true,
        dataType: 'JSONP',
    }).done( function(data){
        count += 1
        checkCount()
        })

and do it with your five requests. If that works out for you please make sure to mark his question as the answer;)

Answer 2

You can create a custom trigger

$(document).trigger('ajaxDone')

and call it when ever you finished your ajax requests.

Then you can listen for it

$(document).on('ajaxDone', function () {
//Do something
})

If you want to keep track of multiple ajax calls you can set a function that counts how many "done" values were passed to it, and once all are finished, you can fire the event.

Place the call for this function in each of the 'success' and 'error' events of the ajax calls.

Update: You can create a function like so

var completedRequests= 0
function countAjax() {
    completedRequests+=1
    if(completedRequests==whatEverNumberOfRequestsYouNeed) {
          $(document).trigger('ajaxDone');
    }     
}

Call this function on every success and error events. Then, ajaxDone event will be triggered only after a certain number of requests.

If you wanna track specific ajax requests you can add a variable to countAjax that checks which ajax completed.

Ajax - All request are Done/Completed

2 个答案: