Execute a function when a series of jquery ajax calls complete(!)

Question

I need to make a series (1-20) ajax calls and I need to have another function be called when they are all complete. And by complete I mean when $.ajax({ complete: ...}) gets called.

Iv looked into using $.when, but after fiddling with it on jsfiddle I have 2 issues with it. 1. $.then and $.done gets called before all my complete callbacks. 2. if one single ajax call fails, it wont get called at all. basically, it seems $.done is called on success, and not complete.

Im thinking there must be some good ajax manager/queue thingy out there that can handle this kind of stuff. Or maybe even some generic async task hanlding thingy.. ;)

The fiddle: http://jsfiddle.net/zvSgX/2

Did you take a look here: lostechies.com/joshuaflanagan/2011/10/20/… — eric.itzhak
– eric.itzhak, Commented Jun 14, 2012 at 10:14
@eric.itzhak not that post specifically, but yes. and in the example on that post the whole thing will fail if a single getTweets fails. — MatteS
– MatteS, Commented Jun 14, 2012 at 10:21
@Jim sorry for the delay, but my computer crashed and I forgot to save the original fiddle, but here's a rewrite: jsfiddle.net/zvSgX/2 — MatteS
– MatteS, Commented Jun 14, 2012 at 10:38

goggin13 · Accepted Answer · 2012-06-15 07:18:37Z

2

If you don't like the default jQuery choices for when $.ajax calls resolve their deferred objects, you could write your own wrapper;

var my_ajax = function (options) {

    var deferred = $.Deferred();
    var user_complete = options.complete;

    options.complete = function (jqXHR, textStatus) {
        if (user_complete) user_complete(jqXHR, textStatus);
        deferred.resolve();
    };

    $.ajax(options);

    return deferred.promise();
};

Here is a fork of your JSFiddle which demos it in action with your sample code.

Since my_ajax does not ever call deferred.reject(), chaining a .fail to $.when will be meaningless if all the arguments to $.when are my_ajax calls.

Hope that is helpful! Please let me know if I can clarify anything.

answered Jun 15, 2012 at 7:18

goggin13

8,0168 gold badges31 silver badges44 bronze badges

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

Comments

Ajay Singh Beniwal · Accepted Answer · 2012-06-14 10:39:58Z

1

You can use promise pattern to solve this problem You can use when.js library to resolve this type of problem Tutorial and samples are available at below location

https://github.com/cujojs/when

answered Jun 14, 2012 at 10:39

Ajay Singh Beniwal

19k11 gold badges84 silver badges100 bronze badges

2 Comments

MatteS Over a year ago

thanks for pointing me in that direction, but can you please provide an example how this could help me?

MatteS Over a year ago

after reading alot of primises and deffered to wrap my head around that pattern, I came up with this as an alternative that uses when.js. but the thing is, its very similar to goggin13's suggestion, so now I wonder what the pro's and con's are.. jsfiddle.net/zvSgX/8

Daniel van Dommele · Accepted Answer · 2012-06-14 10:28:23Z

0

a solution I used recently worked not bad imo. Going through a for-loop I called a method which in turn did a window.setTimeout with a function executing an ajax call with the right data. I used a max and counter variable to check if all ajax calls where executed right (increment counter at the end of the success function). A function called by another setTimeout checked if the counter was equal to max. If not, call the method again in a new setTimeout, otherwise call the function that must be executed at the end.

So in code:

var count = 0, max = 0;

function batchCall() {
var a = [{
    method: "DoThis",
    params: { param1: 1, param2: 2 }
}, {
    method: "DoThat",
    params: { param1: 3 }
}]

max = a.length;

for (var i = 0; i < max; i++) {
    callAjax(a[i]);
}

window.setTimeout(checkAllFinished, 100);
}

function callAjax(o) {
    window.setTimeout(function() {
        // do ajax call here 
    }, 0);
}

function checkAllFinished() {
    if (count == max) {
        // do what you need to do when all are called
    }
    else {
        window.setTimeout(checkAllFinished, 100);
    }
}

answered Jun 14, 2012 at 10:28

Daniel van Dommele

5502 silver badges14 bronze badges

1 Comment

Bergi Over a year ago

A solution using setTimout is obviously not a solution.

Collectives™ on Stack Overflow

Execute a function when a series of jquery ajax calls complete(!)

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related