0

次の関数があります。 

this.makeStuffHappen()

これは、switch ステートメントといくつかの変数に従って異なるアニメーションを作成します。以前のすべての解決が完了しない限り、関数を起動しないようにすることは可能ですか?

のようなものを書きたい

$('button').click(function(){
    a.makeStuffHappen();
    b.makeStuffHappen();
    c.makeStuffHappen();
    d.makeStuffHappen();
});

そして、a が完了した後に b を実行し、b が完了した後に c を実行し、c が完了した後に d のみを実行する必要があります。アニメーションを連鎖させて前のアニメーションを待たせることしかできないのでしょうか? 関数をチェーンすることは可能ですか?

編集: makeStuffHappen() はさまざまな要素をアニメーション化するため、a.makeStuffHappen() は b.makeStuffHappen などとは異なる要素をアニメーション化します。

ありがとう。

4

4 に答える 4

2

最も簡単な (または少なくとも最も柔軟な) 方法は、遅延オブジェクト[docs]を使用することです。そのためには、各関数から遅延オブジェクトを返す必要があります。次に例を示します。

a.makeStuffHappen = function() {
    elementA.animate(...);
    elementB.animate(...);
    ...


    return $.when(elementA, elementB,...);
};

b.makeStuffHappen等についても同様。

$.when() [docs]は、渡されたすべての遅延オブジェクトが解決されると実行されるコールバックをアタッチできる遅延オブジェクトを返します。

次に、イベント ハンドラーで、これらの遅延オブジェクトに対して.pipe() [docs]を呼び出して、それらを連鎖させることができます。

$('button').click(function(){
    a.makeStuffHappen()
       .pipe($.proxy(b.makeStuffHappen, b))
       .pipe($.proxy(c.makeStuffHappen, c))
       .then(function() {
           console.log('All done');
       });
});

デモ

于 2012-04-24T19:51:01.063 に答える
1

コールバックは最も簡単な方法ですが、コールバックを使用したくないため (jQuery.queue()では必要です - とにかく再帰的なコールバックが必要です)、メソッドに bool を返すようにすることができます。

$('button').click(function()
{
    var theObjects = [a,b,c,d];
    for (var i=0;i<theObjects.length;i++)
    {
        if (theObjects[i].makeStuffHappen() === false)
        {
            break;//or throw, or whatever...
        }
    }
});

もちろん、呼び出されるオブジェクトによってメソッドが異なる可能性は十分にあります。配列の代わりにオブジェクトを使用することで、これを回避できます。この場合、イベント ハンドラーは次のようになります。

$('button').click(function()
{
    var theObjects = {a:'aMethod',b:'bMethod',c:'cMethod'};
    for(var i in theObjects)
    {
        if (theObjects.hasOwnProperty(i))
        {
            if(window[i][theObjects[i]]() === false)
            {
                break;//or throw, or return...
            }
        }
    }
});

念のために言っておきますが、ここでなんらかの形式のコールバックを使用したくない理由がわかりません。それが最も簡単な方法だからです...しかし、もちろん、それは私の関心事ではありません... :- )

さて、あなたのゲームを簡単に見てみました... 楽しそうです、それに取り組み続けてください:)。ところで、あらゆる場所でコールバックを使用することから一歩離れています。

$('#placeBet').click(function() {
    placeBet();
});

次のように記述できます。

$('#placeBet').click(placeBet);

後者では、placeBet はコールバック関数です。あなたの主な関心事はここにあると思います：

player.printHand();
dealer.printHand(isDealerHidden);

ここで行うことは、最後にこれを追加して printHand 関数を変更することです。

if (this.name !== 'dealer')
{
    dealer.printHand(isDealerHidden);
}

必要に応じてこれを機能させるには、スクリプトを十分に読んでいませんが、アイデアはわかります...簡単な方法は、ディーラーを明示的にアニメーション化するのではなく、プレーヤーの手のすべてのアニメーターを変更して終了することですプレーヤーのアニメーションが完了した後にディーラーをアニメーション化するコード... 意味不明なことを言っているのはわかっていますが、仕事中です...そして病気です...とにかく頑張ってください。あなたの進捗状況を確認するのにもう少し時間がかかるかもしれません。今夜あなたのスクリプトをもっと詳しく読んで、このドリブルを実際に機能するものに編集してください:-)

于 2012-04-24T19:44:45.747 に答える
1

jquery のキュー機能を見てみましょう: http://api.jquery.com/queue

于 2012-04-24T19:27:48.137 に答える
1

メソッドにコールバック関数を追加できます。

this.makeStuffHappen = function(callback)  {
   //do things like animations
   $(this).animate({ ... }, 200, callback);
   //or call the callback after everything is done:
   callback();
}

次のように使用できます。

$('button').click(function(){
    a.makeStuffHappen(b.makeStuffHappen(c.makeStuffHappen(d.makeStuffHappen())));
});
于 2012-04-25T12:01:10.457 に答える