如何在調用下一個函數之前等到jQuery動畫完成？

Question

在調用下一個函數之前，我無法完成jquery函數的完成。

本質上，我試圖讓我的新聞文章淡出，並完成所有的淡出動畫，然後通過ajax檢索下一頁的文章。

繼承人我擁有（只包括有關功能的採樣）。

的函數來控制淡出每個新聞文章的...

function fadeArticlesOut() { 
    var delay = 0; 
    //set timeout for image to appear (set at 500ms) 
    $('#news-articles article').each(function(index) { 
     $(this).delay(delay).fadeTo(800, 0); 
     delay += 400;  
    }) 
};   

，通過點擊一個分頁鏈接觸發的功能。這會捕獲通過ajax加載的url，但在此之前，這是我想要運行fadeout函數的地方，即fadeArticlesOut。我想要的是在運行loadProducts函數之前完成淡出動畫。

function doPager() { 
    $('.pagination-controls a').click(function(e) { 
     e.preventDefault(); 

     fadeArticlesOut();   
     loadProducts($(this).attr('href')); 
     history.pushState(null, null, $(this).attr('href')); 
     historyedited = true; 
    }); 
} 

function loadProducts(url) { 
    $('#news-articles').empty().addClass('loading').load(url + ' #news-articles-inner', function() { 
     $('#news-articles').removeClass('loading'); 
     doPager(); 
     fadeArticlesIn(); 
    }); 
} 

一旦完成，負載產品功能將淡入新的新聞文章。

到目前爲止，我已經嘗試了很多方法，包括使用自定義回調，延遲對象和設置超時。我遇到的問題是我可以讓它運行淡出，但不會繼續加載ajax內容，或者沒有淡出，但獲得ajax內容。

Answer 1

您可以通過使用.promise()來獲得承諾，然後添加.done()處理程序。在所有的動畫都完成

function fadeArticlesOut() { 
    ... 
    return $('#news-articles article').each(function(index) { 
     ... 
    }).promise(); 
}; 

function doPager() { 
    $('.pagination-controls a').click(function(e) { 
     var $self = $(this); 
     ... 
     fadeArticlesOut().done(function(){ 
      loadProducts($self.attr('href')); 
     });   
     ... 
    }); 
} 

的.done()處理器將被調用。