$.when() With Array Of Deferreds Not Calling Done Action

I am trying to use a variable set of deferred functions in an array along with $.when(). These functions fetch data from the server and render it in the DOM. After all these are do

Solution 1:

Drop the Deferred calls, as $.ajax already returns a deferred.

function loadAllGames(updateGames, updatePlayoffs) {
    var deferredLoads = [];
    if (updateGames !== false)
        deferredLoads.push(loadGames());

    if (updatePlayoffs !== false)
        deferredLoads.push(loadPlayoffs());

    $.when.apply($, deferredLoads).done(loadPostGamesLoadData);
}

Solution 2:

You're creating the deferred objects incorrectly; indeed, you shouldn't be creating them at all. The function accepted by $.Deferred is a factory function run just before $.Deferred returns which receives the new deferred object as an argument (so you can attach handlers to it). (Details in the API docs.) That's not what loadGames and such do at all; they return a deferred object. So you end up with deferred objects that nothing ever settles.

Since they already have deferred objects from $.ajax, which you're returning, just use those functions directly:

function loadAllGames(updateGames, updatePlayoffs) {
    var deferredLoads = [];
    if (updateGames !== false)
        deferredLoads.push(loadGames());
// ------------------------^^^^^^^^^^^

    if (updatePlayoffs !== false)
        deferredLoads.push(loadPlayoffs());
// ------------------------^^^^^^^^^^^^^^

    $.when.apply($, deferredLoads).done(loadPostGamesLoadData);
}