如何在调用下一个函数之前等到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()处理器将被调用。