jquery queue キューとその実装メソッドのネイティブ模倣sharing_jquery

queue() メソッドは、一致する要素に対して実行される関数のキューを表示または操作します。

キューとデキューのプロセスは主に次のとおりです:

キューを使用して関数をキューに追加します (通常は関数配列)
デキューを使用して関数配列の最初の関数を取り出して実行します (取り出して実行するには、shift() メソッドを使用します)
つまり、再度 dequeue を実行すると、別の関数が取得されます。また、デキューが実行されない場合、キュー内の次の関数は実行されないことも意味します。

要素上で animate メソッドとアニメーションを実行する場合、jQuery は要素を fx という名前の関数キューに内部的に追加します。複数の要素を順番にアニメーション化するには、手動でキューを設定する必要があります。

2 つの div を順番に左に移動する例:

コードをコピーします コードは次のとおりです:

div 1

div 2

var FUNC=[
function() {$("#block1").animate({color:"=blue"},aniCB);},
function( ) {$( "#block2").animate({color:"=red"},aniCB);},
function() {$("#block1").animate({color:"= yellow" },aniCB) ;},
function() {$("#block2").animate({color:"=grey"},aniCB);},
function() {$("#block1 ").animate ({color:"=green"},aniCB);},
function(){alert("アニメーションが終了します")}
];
var aniCB=function() {
$( document).dequeue("myAnimation");
}
$(document).queue("myAnimation",FUNC)
//aniCB();
> ;

最初に、順番に実行する必要がある一連のアニメーションを含む関数配列を作成しました
次に、コールバック関数を定義し、デキュー メソッドを使用してキュー内の次の関数を実行しました
次に、この関数を追加しました 配列はドキュメントの myAnimation のキューに配置されます (任意の要素を選択できますが、便宜上このキューをドキュメントに配置しただけです)
最後に、キュー内の最初の関数の実行を開始します
この利点は、関数配列が線形に拡張されるため、増減が非常に便利になるためです。さらに、次のアニメーションを続行したくない場合 (たとえば、ユーザーがボタンをクリックした場合)、キューをクリアするだけで済みます。さらに追加するには、キューに参加するだけです。

コードをコピー コードは次のとおりです:

//キューをクリアします
$ (document).queue("myAnimation",[]);
//最後に新しい関数を追加します
$(document).queue("myAnimation",function(){alert("アニメーションは本当に終わりました!")});

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

jQuery でアニメーションのキュー実装を行い、以下の JavaScript を使用して模倣します:

コードをコピー コードは次のとおりです:

function Queue(){
this.a = [];
this.t = null;
}
Queue.prototype = {
queue:function (s) {
var self = this;
this.a.push(s);
this.hold();
return this;
},
hold:function (){
var self = this;
clearTimeout(this.t);
this.t = setTimeout(function(){
console.log("キュー開始! ",self.a );
self.dequeue();
},0);
},
dequeue:function(){
var s = this.a.shift(),self = this ;
if(s){
console.log("s:" s);
setTimeout(function(){
console.log("end:" s);
self .dequeue( );
},s);
}
}
};
var a = new Queue().queue(500).queue(200).queue(400) ).queue (1500).queue(300).queue(2000);