如何嵌套jQuery .when調用回調？

Question

我有一個函數加載一個部分。

function loadSection(sectionId, onLoaded) { 
    $.when(
     loadTemplate(sectionId), 
     // etc 
    ) 
    .then(function() { 
     // removed for brevity 
    } 
} 

在loadTemplate功能我淡出當前模板和淡出後，我加載新的模板。

function loadTemplate(sectionId) { 
    // Fade out current template. 
    return $content.fadeOut(function() { 
     // After fade out, load new template via ajax. 
     $.ajax({ 
      url: settings.apiUrl + 'GetSectionTemplate', 
      data: { sectionId: sectionId }, 
      type: 'post', 
      success: function (template) { 
       // Add new content and fade in new template. 
       $content 
        .html(template) 
        .fadeIn(); 
      } 
     }); 
    }); 
} 

的問題是$.when只有等待淡出功能，在移動之前完成。我需要它等待fadeOut和ajax調用完成，但我需要ajax調用才能在fadeOut完成後執行。

Answer 1

創建一個延遲對象，返回，然後當AJAX完成解決它：

function loadTemplate(sectionId) { 
    var deferred = $.Deferred(); 
    $content.fadeOut(function() { 
     $.ajax({ 
      url: settings.apiUrl + 'GetSectionTemplate', 
      data: { sectionId: sectionId }, 
      type: 'post', 
      success: function (template) { 
       $content.html(template).fadeIn(); 
       deferred.resolve(); 
      } 
     }); 
    }); 
    return deferred; 
} 

Answer 2

試着讓你的Ajax調用同步：

$.ajax({ 
    async: false, 
    url: settings.apiUrl + 'GetSectionTemplate', 
    ... 
    ... 

Answer 3

只需使用一個Array推無極對象爲並返回。像

function loadTemplate(sectionId) { 
    var promises = [ ]; 

    // Fade out current template. 
    promises.push($content.fadeOut()); 
    promises.push($.ajax({ 
     url: settings.apiUrl + 'GetSectionTemplate', 
     data: { sectionId: sectionId }, 
     type: 'post', 
     success: function (template) { 
      // Add new content and fade in new template. 
      $content 
       .html(template) 
       .fadeIn(); 
     } 
    })); 

    return promises; 
} 

，然後調用它像

$.when.apply(null, 
    loadTemplate(sectionId) 
).then(function() { 
}); 

如果您需要更多的控制權的承諾，對象的順序解決，或者你想攔截/過濾器的效果，你也可以使用.pipe()有所concat的承諾。