0

ajax request will be initiated by user click

It is impossible to know how many request will be sent

I tried ajaxComplete, but it is not work, I think it cannot detects ajax after the page loaded.

function ajax1() {
    $.ajax({
        url: 'getCount.php',
        type: 'GET',
        dataType: 'html',
        success: function (data) {
            var count = parseInt(data);
            for (var i = 0; i < count; i++) {
                ajax2();
            }
        }
    });
}

function ajax2() {
    $.ajax({
        url: 'getCount2.php',
        type: 'GET',
        dataType: 'html',
        success: function (data) {
            var count = parseInt(data);
            for (var i = 0; i < count; i++) {
                ajax3();
            }
        }
    });
}

function ajax3() {
    $.ajax({
        url: 'ajax3.php',
        type: 'GET',
        dataType: 'html',
        success: function (data) {
            //do something
        }
    });
}
$(document).ajaxComplete(function (event, xhr, settings) {
    alert('Complete');
});

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
CL So
  • 3,647
  • 10
  • 51
  • 95

2 Answers2

3

UPDATE: Really good read on promises: Promises cookbook

Normal way of doing that is using promises returned by $.ajax function.

Change your functions to return result of .ajax call:

function ajax1(..) { 
  return $.ajax(...)
}

Then use $.when to make new promise resolved when all promises are resolved.

$.when([ajax1(), ajax2(), ajax3()]).then(function() { alert('all complete') })

However in more complicated case (as is yours) you need to dynamically store references to all promises and only call $.when once all the promises added.

So for instance you can create to arrays of promises, one for ajax2 calls and one for ajax3 calls.

var ajax2calls = [], ajax3calls=[]  

function ajax1() {
  return $.ajax({
    url: 'getCount.php',
    type: 'GET',
    dataType: 'html',
    success: function (data) {
        var count = parseInt(data);
        for (var i = 0; i < count; i++) {
            ajax2calls.push(ajax2());
        }

        $.when(ajax2calls).then(function() {
            $.when(ajax3calls).then(function() {
               alert('all done')
            }
        })

    }
  });
}

Also, you might want to consider using Bluebird promise library, as it provides a lot more rich API than regular promise/A or promise/A+. Check map, settle, all methods etc.

vittore
  • 17,449
  • 6
  • 44
  • 82
  • I heard similar concept before, that is Flow Control, are they same thing? – CL So Sep 07 '15 at 14:37
  • 1
    @CLSo not really, no. However you can think about promises in terms of flow control. – vittore Sep 07 '15 at 16:25
  • 1
    @CLSo forget to give you links for documentation http://api.jquery.com/category/deferred-object/ - jquery deferred/promises. And https://www.promisejs.org/ – vittore Sep 07 '15 at 16:32
0

The way that I see that would make the most sense is to do nested call backs. This way everything is happening within callbacks and nothing happens until they all finish. This questions may help wait for a jquery ajax callback from calling function

Community
  • 1
  • 1
Mav2287
  • 796
  • 2
  • 9
  • 22