Using $.when() / $.promise() with functions that have AJAX inside

Question

Having a really hard time with this issue, and I know $.when() can be used like so (with multiple AJAX statements) to promise you when they have all finished.

http://jsfiddle.net/M93MQ/

    $.when(
        $.ajax({ url: '/echo/html/', success: function(data) {
            alert('request 1 complete')
          }
        }),

        $.ajax({ url: '/echo/html/', success: function(data) {
            alert('request 2 complete')
          }
        })
    ).then( function () { alert('all complete'); });

But this only works with raw $.ajax(), is there anyway to have this same functionality with function calls, that in turn have the ajax inside them (and other random logic) ?

Pseudo-code idea:

    // The functions having the AJAX inside them of course
    $.when(ajaxFunctionOne, ajaxFunctionTwo).then(function () {
        alert('all complete'); 
    });

What you're passing to $.when() is the return value of the function calls made to $.ajax; you're not passing it functions, in other words. By the time that $.when() is called, the ajax operations have already started. — Pointy
– Pointy, Commented Jan 31, 2013 at 21:16

user400654 · Accepted Answer · 2013-01-31 21:24:25Z

6

Sure, have the function return a promise object.

function ajaxFunctionOne() {
    return $.ajax(...)
}
function ajaxFunctionTwo() {
    var dfd = $.Deferred();
    // on some async condition such as dom ready:
    $(dfd.resolve);
    return dfd.promise();
}

function ajaxFunctionThree() {
    // two ajax, one that depends on another
    return $.ajax(...).then(function(){
        return $.ajax(...);
    });
}   

$.when(ajaxFunctionOne(),ajaxFunctionTwo(),ajaxFunctionThree()).done(function(){
    alert("all complete")
});

edited Jan 31, 2013 at 21:24

answered Jan 31, 2013 at 21:16

user400654

95.1k16 gold badges168 silver badges188 bronze badges

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

1 Comment

Mark Pieszak - Trilon.io Over a year ago

Amazing... Thanks Kevin, I'm a dummy and I wasn't invoking the functions in the $.when(functionName <-- no () plus, I didn't know it had to be within the return of it! Cleared it right up, your the man now dawg.

Collectives™ on Stack Overflow

Using $.when() / $.promise() with functions that have AJAX inside

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related