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 に答える