jQuery callback when 3 methods are finished?

Question

I have 3 JS functions :

func1 ()
{
    $.ajax(...,callback1)
}


func2 ()
{
    $.ajax(...,callback2)
}


func3 ()
{
    $.ajax(...,callback3)
}

They are executed like this :

func1();
func2();
func3();

Question how can I execute mySummaryCallback() after all 3 are done ?

NB

I could use a closure callback function which increase a value and then execute. but I can't touch the ajax callback functions. (https://stackoverflow.com/a/2911891/859154)

Arun P Johny · Accepted Answer · 2013-09-23T11:16:48.320

3

Use $.when() to do this for all your methods need to return the promise object back to the caller

func1() {
    return $.ajax(..., callback1)
}


func2() {
    return $.ajax(..., callback2)
}


func3() {
    return $.ajax(..., callback3)
}

$.when(func1(), func2(), func3()).done(function () {
    //all are success
}).fail(function(){
    //atleast one failed
}).always(function(){
    //all are completed
})

edited Sep 23 '13 at 11:16

answered Sep 23 '13 at 11:10

Arun P Johny

384,651
66
527
531

Your edit helped me.. so `when` signals when they all **resolved** and then they (all results) **filtered to one** callback done/fail/always....right ? – Royi Namir Sep 23 '13 at 11:18
@RoyiNamir yes... the `always` is called in either case... along with `done` and `fail` – Arun P Johny Sep 23 '13 at 11:21
I guess always() will be fired even, e.g, only first deferred object failed, not waiting for all completed. This need more test thought – A. Wolff Sep 23 '13 at 11:28

score 2 · Answer 2 · answered Sep 23 '13 at 11:10

2

Return promise interface, exposed by each ajax request, from your functions and use $.when() jquery method:

func1 ()
{
    return $.ajax(...,callback1)
}


func2 ()
{
    return $.ajax(...,callback2)
}


func3 ()
{
    return $.ajax(...,callback3)
}

$.when(func1(),func2(),func3()).done(/*callback*/);

answered Sep 23 '13 at 11:10

A. Wolff

74,033
9
94
155

Does the `When` signals when they all `complete` or `done` ? – Royi Namir Sep 23 '13 at 11:12
when done (success), for complete use always() and for error use fail() – A. Wolff Sep 23 '13 at 11:13
Yeah I know but where does it say that `when` signals when they all done ? the docs says that it signal when it resloved. – Royi Namir Sep 23 '13 at 11:17
It's fired when all deferred objects are success callback fired. – A. Wolff Sep 23 '13 at 11:20
so my first comment is incorrect. I asked: **when** does the `when` functions signals . – Royi Namir Sep 23 '13 at 11:21
What are we talking about? Your first comment is a question, how can this be incorrect? – A. Wolff Sep 23 '13 at 11:23
I meant : my assumption/question (my first comment) is incorrect. then `when` signals when they all resolved. and not when they all complete or done. – Royi Namir Sep 23 '13 at 11:24

score 0 · Answer 3 · answered Sep 23 '13 at 11:09

If you can't edit callbackN functions directly, make a wrapper, for instance:

func2 ()
{
    $.ajax(..., function() {
        //call your callback here
        callback2();

        //increase your counter here once it's done ...
    });
}

Is that what you wanted?

score 0 · Answer 4 · answered Sep 23 '13 at 11:10

0

I think that you can use jQuery Deferred in this situation

answered Sep 23 '13 at 11:10

Den Kison

1,074
2
13
28

score 0 · Answer 5 · answered Sep 23 '13 at 11:10

0

One way is to synchronized all the Ajax calls and then you need to call your BigCallback

Otherwise you need to check what is the state(0- for request initiated, to 4) of the last Ajax then you can proceed according.

answered Sep 23 '13 at 11:10

Senthilkumar Srinivasan

13
6

jQuery callback when 3 methods are finished?

5 Answers5