jQueryにおけるキューとデキューの使用法の違い

jQuery のキューとデキューは非常に便利なメソッドのセットであり、順番に実行する必要がある一連の関数に特に役立ちます。特に、アニメーションアニメーション、Ajax、タイムアウト、および一定の時間を必要とするその他の関数

キューおよびデキュープロセスは主に次のとおりです:
1. キューを使用して関数をキューに追加します(通常は関数の配列)。
2. デキューを使用して関数をキューに追加します

配列内の最初の関数が取り出されて実行されます (取り出して実行するには、shift() メソッドを使用します)

これは、デキューが再度実行されるときに、別の関数を取得します

また、デキューが実行されない場合、キュー内の次の関数は決して実行されないことを意味します

要素上で animate メソッドとアニメーションを実行する場合、jQuery はそれを fx という名前の関数キューにも追加します内部的に

そして、複数の要素がアニメーションを順番に実行するには、手動でキューを設定する必要があります。

例として、2 つの div を順番に左に移動したい場合は、ここをクリックして表示します

 div {
 background:#aaa;
 width:18px;
 height:18px;
 position:absolute;
 top:10px;
 }　

数回交代で移動するだけの場合は、animate の コールバック関数
を使用して実行できます。アニメーションは別のアニメーションのコールバック内に配置されます

たとえば

 $(“#block1″).animate({left:”+=100″},function() {
 $(“#block2″).animate({left:”+=100″},function() {
 $(“#block1″).animate({left:”+=100″},function() {
 $(“#block2″).animate({left:”+=100″},function() {
 $(“#block1″).animate({left:”+=100″},function(){
 alert(“动画结束”);
 });
 });
 });
 });
 });

しかし、アニメーションがたくさんある場合、このメソッドは単純に残酷です。

現時点では、キューとデキューを使用する方がはるかに簡単です:

var FUNC=[
 function() {$("#block1").animate({left:"+=100"},aniCB);},
 function() {$("#block2").animate({left:"+=100"},aniCB);},
 function() {$("#block1").animate({left:"+=100"},aniCB);},
 function() {$("#block2").animate({left:"+=100"},aniCB);},
 function() {$("#block1").animate({left:"+=100"},aniCB);},
 function(){alert("动画结束")}
 ];
 var aniCB=function() {
 $(document).dequeue(“myAnimation”);
 }
 $(document).queue(“myAnimation”,FUNC);
 aniCB();　　

1. 私は最初に、順番に実行する必要がある一連のアニメーションを含む関数配列を作成することを提案しました
2 次に、コールバックを定義しました。関数と使用されたデキュー このメソッドは、キュー
3 内の次の関数を実行するために使用され、この関数配列をドキュメント上の myAnimation のキューに置きます (任意の要素を選択できます。便宜上、このキューをドキュメント上に置いただけです) )

4、そして最後にキュー内の最初の関数の実行を開始しました

この利点は、関数配列が線形に拡張されるため、増減が非常に便利になることです。

さらに、次のアニメーションを続行したくない場合 (たとえば、ユーザーが特定のボタンをクリックした場合)、キューをクリアするだけで済みます。さらに追加するには、キューに参加するだけです

 //清空队列
 $(document).queue(“myAnimation”,[]);
 //加一个新的函数放在最后
 $(document).queue(“myAnimation”,function(){alert(“动画真的结束了！”)});

私は以前、アニメーションを一定期間一時停止するために使用される待機プラグインを投稿しました

ぜひご覧ください。彼はこの原則も使用しており、デフォルトでは fx にあります。タイムアウトを挿入してキューに入れます。タイムアウトが経過してキュー内の次の関数の実行が続行されるまで、デキューは実行されません。

もちろん、これは ajax などのメソッドにも使用できます。一連の ajax 対話が必要な場合、各 ajax は前の対話が終了した後に開始する必要があります。これまでの最も独創的な方法はコールバック関数を使用することでしたが、これも同様です。面倒な。また、queue を使用してキューを追加し、各 ajax の後のコールバックでデキューを 1 回実行します。

jQuey ライブラリを使用しない場合は、自分で簡単なコードを記述してこの問題を解決することもできます。 🎜

以上がjQueryにおけるキューとデキューの使用法の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。