0

Ajax 呼び出しの場合、特定の順序で呼び出す必要があるさまざまな要素の遷移がいくつかあります。jQuery Deferred について読んだとき、これは私が探していたものだと思いましたが、動作させることができないようです。

アーカイブしたいものを理解するために、単純な jsfiddle を作成しました: http://jsfiddle.net/pe5Bb/1/

私が推測する問題は、css3 トランジションです。すべての機能が最初から実行されます。しかし、console.log を transitionend コールバックに配置すると、機能しているように見えますが、関数はまだ実行されています。

function box2() {
var deferred = $.Deferred();

if ( $('#box2').hasClass('active') ) {
    $('#box2').css({opacity:0}).bind(transitionend, function(){
        console.log("css3 done");
        deferred.resolve();
        $('#box2').unbind(transitionend);
    });
 } else {
     deferred.resolve();
 }

return deferred.promise();

}

私が達成したいのは、複数の関数 (新しいコンテンツへの遷移の状態を含む) を作成できることと、それらをどの順序で呼び出す必要があるかを伝えることができることです。この例では、クラスの追加/削除によって呼び出されることがある css3 トランジションを操作します。このシナリオで deferred を使用するのが正しくない場合は、それを聞いてみたいと思います。

4

1 に答える 1

1

問題は、あなたが電話をかけている方法だけだと思います。promise が解決されたときに実行する関数を渡す必要があります。このようなもの：

var promise = box();
promise.done( box2 );

一連の呼び出しを連鎖させたい場合は、次のようにすることができます。

var promise = box();
promise.done(function() {
    promise = box2();
    promise.done(function() {
        scrollTo();
    });
});

jsfiddle リンク

または、メソッドを使用することもできますが、次のthenように呼び出す必要があります。

var promise = box();
promise.done().then( box2 ).done().then( scrollTo );
于 2013-07-06T19:42:44.877 に答える