$ .when() avec le tableau des appels différés n'appelant pas l'action terminée

Question

J'essaie d'utiliser un ensemble variable de fonctions différées dans un tableau avec $.when(). Ces fonctions récupèrent les données du serveur et les restituent dans le DOM. Après tout ce qui est fait, certains scripts sont chargés et quelques actions de post-chargement sont effectuées.

Voici ce que je suis en utilisant:

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

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

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

Le problème est que loadPostGamesLoadData est jamais appelée.

Les deux loadGames et loadPlayoffs promesses retour:

function loadGames() { 
    $.get('{% url wave_spinner_template %}', {message: 'Loading games...'}, function (data) { 
     $('#weeks').html(data); 
    }); 

    return $.ajax({ 
     url: "{% url weeks season.id %}", 
     success: function (data) { 
      $('#weeks').html(data); 
     }, 
     error: function() { 
      console.log("Error loading games."); 
     } 
    }); 
} 

function loadPlayoffs() { 
    $.get('{% url wave_spinner_template %}', {message: 'Loading playoffs...'}, function (data) { 
     $('#playoffs').html(data).children('.spinner-container').addClass('border-top'); 
    }); 

    return $.ajax({ 
     url: "{% url playoffs season.id %}", 
     success: function (data) { 
      var $playoffs = $('#playoffs'); 
      if (!$playoffs.length) { 
       $playoffs = $('<div>', {id: 'playoffs'}); 
       $('#weeks').after($playoffs); 
      } 
      $playoffs.html(data); 
     }, 
     error: function() { 
      console.log("Error loading playoffs."); 
     } 
    }); 
} 

Answer 1

Vous créez incorrectement les objets différés; En effet, vous ne devriez pas les créer du tout. La fonction acceptée par $.Deferred est une fonction d'usine exécutée juste avant que $.Deferred renvoie qui reçoit le nouvel objet différé en tant qu'argument (vous pouvez donc y attacher des gestionnaires). (Details in the API docs.) Ce n'est pas ce que loadGames et tel faire du tout; ils renvoient un objet différé. Donc vous vous retrouvez avec des objets différés que rien ne règle jamais.

Puisqu'ils déjà ont différé des objets de $.ajax, que vous êtes de retour, il suffit d'utiliser ces fonctions directement:

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

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

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

Answer 2

Laissez tomber les Deferred appels, comme $.ajax retourne déjà un différé.

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

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

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