1

deferred を使用したい関数があり、アニメーションをチェーンすることを約束します。

最初のアニメーションは、 https://github.com/stephband/jticker/blob/master/js/jquery.jticker.jsを使用したタイプ ライター プラグインです。2 つ目は、他のアニメーションを含む関数です。

私がやりたいことは、最初のアニメーションを実行し、アニメーションが完了したら 2 番目のアニメーションを実行することです。

 $(function () {            
        var ticker =setTimeout(runTicker(), 8000);           
        $.when(ticker).done(function(){
            setTimeout(Other(),16000)});
    });

  function runTicker() {
        $("#ticker").ticker({
            cursorList: " ",
            rate: 50,
            delay: 18000
        }).trigger("play").trigger("stop");
    }

遅延の例を数多く試しましたが、まだ取得できません。

ティッカーを再び機能させるために、最終的にすべての例をクリアしました。

deferred と promise を使用して Other() 関数を実行するにはどうすればよいですか?

ありがとうございました

4

2 に答える 2

1

適切なコールバックベースのソリューションで実際の問題を解決する方法がわかりません (使用する Ticker プラグインに関する十分な情報がありません) が、現在のコードで何が問題になっているのかを説明できます。

var ticker = setTimeout(runTicker(), 8000);

runTickerすぐに電話しないでください。必要なのは、呼び出しの結果ではなく、関数自体を に渡すことですsetTimeout。[プレーンな整数] の数値が返され、 に割り当てられtickerます。- を介して中止するときのタイムアウトを識別するために使用でき、それ以外の場所では使用できclearTimeoutません。

$.when(ticker)...

今すぐ新しい Deferred を作成します。そのドキュメントを見てください: Deferred オブジェクトを互いに結合し、数値などの他の値に対してすぐに解決される Promise を作成します。したがって、コールバックもすぐに呼び出され、再びに渡す代わりにdone実行するという間違いを犯します。OthersetTimeout

あなたが使用したプラグインはコールバックに関して非常に制限されているように見えるので、私は今自分自身を書きました（ただの楽しみのために:-)。純粋なDOMメソッドを非常にエレガントに使用するこの以前の回答からの私のソリューションを適応させます。これは、標準の jQuery プラグインとして作成されており、さらに優先度stopやgoメソッドが追加されており、最も重要なこととして、jQueryfxキューにうまく統合されています。つまりanimate()、コールバックやチェーンに関してまったく同じように使用できます。また、Deferred を使用する場合は、promise()メソッドを呼び出して、キューの終わりの Promise を取得できます。呼び出しの例:

$('#ticker').fadeOut().delay(2000).typewriter({framerate:1000/30}, function() {
    // the typewriter effect has just ended
}). ... .promise().done(function() {
    // effect queue has ended - start Other()
});

jQuery(".stop").click($.fn.typewriter.bind($("#ticker"), "stop"));

→ jsfiddle.net のコード

于 2012-11-14T18:56:38.590 に答える
0

setTimeout明らかに、ここではネイティブ Javascript メソッドである jQuery Deferred objectを返しません。次のように書き直す必要があります。

function runTicker() {
    return jQuery.Deferred(function( promise ) {
        setTimeout(function() {
            $("#ticker").ticker({
                cursorList: " ",
                rate: 50,
                delay: 18000
            }).trigger("play").trigger("stop");

            promise.resolve();
        }, 8000);
    }).promise();
}

そして、あなたはそれを次のように呼び出すことができます

var ticker = runTicker();

jQuery.when( ticker ).done(function() {
    setTimeout(Other,16000)});
});
于 2012-11-14T18:10:39.620 に答える