jqueryキューqueueは原生と真似してその実現方法を共有します。


queue()メソッドは、マッチング要素上で実行される関数列を表示または操作する。
queueとdequeueの過程は主に以下の通りです。
関数をqueueでキューに入れ(通常は関数配列)、関数配列の最初の関数をdequeueで取り出して実行するということは、dequeueを再実行すると別の関数が得られます。また、dequeueを実行しないと、キューの次の関数は永遠に実行されないことを意味する。
一つの要素にアニメーションを加えると、jQuery内部にfxという関数の列が追加されます。複数の要素に対して順番にアニメーションを実行するには、マニュアルでキューを設定して行わなければなりません。
一つの例では、二つのdivを順番に左に移動します。

<div id="block1">div 1</div>
<div id="block2">div 2</div>
<script type="text/javascript">
 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();
</script>
まず関数配列を作りました。中には順番にアニメーションを実行する列があります。その後、私はdequeue方法で列の次の関数を実行します。それから、この関数配列をdocument上のmyAnimationの列に入れます。私は便利のためにこの列をdocumentに置いただけです。最後に列の中の最初の関数を実行し始めました。このようにする利点は、関数配列が直線的に展開され、増減が非常に便利です。また、次のアニメーションを続けない場合(たとえばユーザーがボタンを押した場合)は、その列をクリアするだけでいいです。もっと増やすには、列に入れるだけです。

//
$(document).queue("myAnimation",[]);
//
$(document).queue(“myAnimation”,function(){alert(" !")});
これはもちろんajaxのような方法にも使えます。一連のajaxインタラクションが必要なら、各ajaxは前の終了後から始まることを望んでいます。これまでの最も原始的な方法はコールバック関数を使うことです。同様にqueueを利用してキューを追加し、ajax以降のフィードバックでdequeueを実行すればいいです。
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("Queue start! ",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);