Execute a function after the recursive asynchronous ajax calls

Question

I need to execute a function after the recursive asynchronous ajax calls. I have:

var tree = [1, 2 ,3, 4];

recursion(0);

function recursion(i) {
    $.ajax('http://example.com/' + tree[i])
        .done(function (data) {
        // data is array
        ++i;
        if (tree[i] !==undefined) {
            $.each(data, function () {
                recursion(i);
            });
        }
    });
}

And I want after all calls when they are done to do:

recursion(0).done(function () {alert('All calls are done!')});

I know, I should use $.Deferred of JQuery, but ajax call return promise too. I'm trying to use $.Deferred but I encountered a problem with loop in this place:

     $.each(data, function () {
         recursion(i);
     });

Please, help me.

Answer 1

I'm trying to use $.Deferred

Good!

but I encountered a problem with loop in this place: $.each(data, recursion)

Each of the recursion(i) calls returns a promise, so when we have kicked them off we're left with a collection of promises. Now, we can use $.when to wait for all of them, and get back a promise for all of their results.

Now, we use then to chain this looped execution after the ajax call, so that we can return a promise for the eventual result of this recursion step.

function recursion(i, x) {
    return $.ajax('http://example.com/' + tree[i] + x).then(function (data) {
        if (++i < tree.length)
            // get an array of promises and compose all of them
            return $.when.apply($, $.map(data, function(d) {
                return recursion(i, d);
            }));
        else // at the innermost level
            return data; // get the actual results
    }); // and return a promise for that
}

Answer 2

You would need to do something like this:

function recursion(i) {

    return $.ajax('http://example.com/' + tree[i])
        .then(function (data) {
            // data is array
            ++i;
            if (tree[i] !==undefined) {

                // get an array of promises
                var promises = $.map(data, function () {
                    return recursion(i);
                });

                // return the `when` promise from the `then` handler 
                // so the outer promise is resolved when the `when` promise is
                return $.when.apply($, promises);
            } else {
                // no subsequent calls, resolve the deferred
            }
        });
}

Currently untested, but it at least gives you the idea. Basically you only resolve the deferred once all of the subsequent calls are resolved.

Answer 3

To make it simple, you could just run a function in your .done that checks the value of i and if it's equal to the length of tree (minus 1), then run your function.

Sorry, that doesn't cover the asynchronous nature...instead...create a variable that tracks the number of completed and compare to the number in the array. When equal, run your function.

Answer 4

Edit , jquery deferred , promise not actually needed to achieve requirement . See comment and link by Bergi , below.

Try (this pattern ; without jquery.deferred or promise's)

   (function recursion() {
        var tree = [1, 2 ,3, 4]
        , results = []
        , dfd = function(res) {
            alert('All calls are done!');
            console.log(res)
        };

    $.each(tree, function(k, v) {
        $.ajax("http://example.com/" + v)
        .done(function (data, status, jqxhr) {
        // data is array
          results.push([data, status, jqxhr.state()]);
            if (results.length === tree.length) {
              dfd(results);          
            }
        });

    });

    }());

jsfiddle http://jsfiddle.net/guest271314/nvs0jb6m/