0

私は$.whenいくつかの関数のフローを制御して遊んでいます。何かが機能しない理由と、機能するようにコーディングする方法を少し明確にする必要があります。

この不自然な例の最終目的は、インライン コールバックで達成できますが、個々の関数は例よりも複雑であるため、私が探しているソリューションではありません。最終的なコードは次のことを行う必要があります。

  • アニメイトボックス2
  • 一瞬待って
  • ボックス 2 が終了し、短い一時停止があった後、ボックス 3 をアニメーション化する
  • 一瞬待って
  • 次に、ボックス 3 が終了して短い一時停止があった後、box1 をアニメーション化します。
  • 最後に、すべてが完了した後にすべてが完了したことを示すアラート

私はこれの多くのバリエーションを試しましたが、私を最も悲しませるものを提示しようとします. ここで見つかったイライラするフィドル

アニメーションが終了した 3 つのボックスの後にメッセージを警告する、最も簡単な部分から始めました。

var a = $('.box1').animate({top: '100px'}, 2000),
    b = $('.box2').animate({top: '100px'}, 1000),
    c = $('.box3').animate({top: '100px'}, 2000);

$.when( a, b, c )
    .done( function(){ alert( 'all done' )} );​

問題ありません...私は実際に自分が何をしているのか知っていると思い始めました...いいえ！

次に、各変数をそれぞれの関数に分離できるはずだと考えました...しかし、最初にアラートが発生し、アニメーションの継続時間を無視して、アニメーションが突然終了しました!

function a(){
    $('.box1').animate({top: '100px'}, 2000);
}
function b(){
    $('.box2').animate({top: '100px'}, 1000);
}
function c(){
    $('.box3').animate({top: '100px'}, 2000);
}

a();
b();
c();
$.when( a(), b(), c() )
    .done( alert('all done') );

スコープのように見えますか？では、 をそれぞれの関数に移動して、次の関数を呼び出すとどうなるでしょうか$.when... 現実の世界では、単一要素のアニメーションだけでなく、さらに多くのことが起こっています。

それはうまくいきませんでした！なぜ正確に？アラートが再び最初にポップアップします。は？そして、すべてのボックスが、指定されたよりも速く最終的な位置にアニメーション化されます。

function a(){
    a = $('.box1').animate({top: '100px'}, 2000);
    $.when( a ).done( alert( 'all boxes moved down' ) );
}
function b(){
    b = $('.box2').animate({top: '100px'}, 1000);
    $.when( b ).done( c() );
}
function c(){
    c = $('.box3').animate({top: '100px'}, 2000);
    $.when( c ).done( a() );
}

b();

jsfiddle update 100までにスタックオーバーフローが発生しました...しかし、私が考えたのを待って、それをさらにシンプルにし、各関数からすべてを削除し、起動するため$.whenに呼び出した後に1つ追加するだけです...残念ながら同時に起動しました! ここで何が欠けていますか？b()c()b()c()

function a(){
    a = $('.box1').animate({top: '100px'}, 2000);
}
function b(){
    b = $('.box2').animate({top: '100px'}, 1000);
}
function c(){
    c = $('.box3').animate({top: '100px'}, 2000);
}      

$.when( b() ).done( c() );

私ができると思っていたという事実を気にしないでください

$.when( b() ).delay(1000).done( c() );

私はこれをいつ、完了したか、延期したかを理解しようと夢中になっています (必要に応じてさらに投稿できます:)!) 1 時間の jquery 開発者プレゼンテーションを見た後、この状況に実装できると思いました。 .. 最後に、私は単純なタスクを持っており、明らかに何かが欠けています! 提供された指示/説明をいただければ幸いです。

html と css

<div class='boxes'>
    <div class='box box1'></div>
    <div class='box box2'></div>
    <div class='box box3'></div>
</div>​

.box{width: 40px; height: 40px; background-color: green; position:absolute;}
.box1{left: 0px;}
.box2{left: 60px;}
.box3{left: 120px;}
4

2 に答える 2

1

これがあなたが探しているものだと思いますか？

http://jsfiddle.net/XEBeg/91/

メソッドから呼び出しを取り出しdoneます。IE。done(func) いいえ done(func())

alertまた、無名関数で呼び出しをラップしました。

これは私がこれを解決する方法ではないことに注意する必要がありますが、少なくともあなたの方法を使用してそれを解決する方法だと思います

于 2012-11-16T20:54:43.250 に答える
1

アニメーションを関数でラップし始めたら、関数がpromiseメソッドを含むオブジェクトを返すことを確認する必要があります。例えば、

function a() {
    return $('.box1').animate({top: '100px'}, 2000);
}

今、あなたはできる：

$.when( a(), b(), c() ).done(function() {
    alert("all done!");
});

これで、それを分割して順序を制御できます。

// run b and wait one second, when done run c and wait 1 second, then run a
b().delay(1000).promise().done(function(){
    c().delay(1000).promise().done(a);
});

一度に複数の約束を処理することは決してないので$.when、まったく必要ありません。

于 2012-11-16T20:55:09.770 に答える