0

私の質問を見てみましょう！2 つの DIV を持つ HTML ページがあります。これらは両方とも、クリック イベントでトリガーされる jQuery 関数にリンクされています。したがって、div1 と div2 があります。ここにいくつかのコードがあります：

<div id="div1"></div>
<div id="div2"></div>
....
<script>
   $('#div1').click(function(){
       $('#div1').animate({some animations...},1000);
   });
   $('#div2').click(function(){
       $('#div2').animate({something else...},1000);
   });
</script>

わかりました、私の問題は、ユーザーがdiv1をクリックしようとすると、div1がアニメーションを実行する必要があり、時間がかかることです...しかし、このアニメーション中にユーザーがdiv2をクリックしようとすると、このクリックがトリガーされる必要はありませんdiv1 アニメーションが終了するまで。私が投稿したスクリプトは私の非常に短いバージョンであり、これらの関数の構造を変更することはできません。バインド/バインド解除を使用してみましたが、他のアニメーションが停止するまで divX を待機させることができません。これは、バインド関数が要素にアタッチするイベントを自動トリガーするためです。手伝って頂けますか？

編集：誰もが理解できるようにするために、私の例では5つのdivがあり、それぞれがクリックイベントでトリガーされる異なる機能を持つとします。div1をクリックすると、div1によってトリガーされたアニメーションの実行中に他のすべてのdivを無効にする必要があります.アニメーションが完了した後、クリックイベントで再度有効にすることができます.... div1 の場合、アニメーションが完了するまで、他のすべての div をクリックできますが、イベントをトリガーする必要はありません。

4

3 に答える 3

0

ここでの問題は、しばらく時間がかかる関数を起動していることです (アニメーションの実行には 1 秒以上かかる場合があります)。これが実行されている間、プロセスはブロックされます。

Nicholas C. Zakas は、著書「High Performance Javascript」の中で、長い処理操作を短い時間にカプセル化し、それらの操作が残りの実行をブロックしないようにすることを推奨しています。

主なアイデアは、タイマーを使用して、50ms 以上かかる各操作を分割することです。後でここに例を投稿できるかどうかを確認します。

于 2012-10-03T13:00:06.497 に答える
0

遅延オブジェクトを使用して、あるアニメーションを別のアニメーションが完了するまで待機させることができます。

$('#div2').click(function() {
    $('#div1').promise().done(function() {
        $('#div2').animate(...);
    });
});

は、既存のアニメーションが完了し.promise().done(...)たときにのみ内部コールバックを開始します。#div1何もない場合は、すぐに続行されます。

http://jsfiddle.net/alnitak/NjCf4/を参照してください。

または、次を使用できます.queue。

$('#div1').queue(function(next) {
    $('#div2').animate(...);
    next();
});

後者のコードは#div2、 の現在のキューの最後に のアニメーションをキューに入れます#div1。ただし、後続の追加のアニメーションがキューに入れられた#div1場合でも、後で発生します。

遅延メソッドは、1) 要素の任意のセットを待機できるため、おそらく優れています。2) 新しいアクションをキューにドロップするのではなく、すべてのアニメーションが完了するまで明確に待機します。

于 2012-10-03T12:59:19.847 に答える