4

在调用下一个函数之前，我无法完成我的 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，但在此之前，这是我要运行淡出功能的地方，即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 内容。

4

1 回答 1

7

.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()在所有动画完成后被调用。

于 2013-01-24T17:39:10.850 回答