jquery隊列queue與原生模仿其實作方法分享

jquery隊列queue與原生模仿其實作方法分享_jquery

WBOY

發布： 2016-05-16 16:54:44

原創

922 人瀏覽過

queue() 方法顯示或操作在符合元素上執行的函數佇列。

queue和dequeue的過程主要是：

用queue把函數加入隊列（通常是函數數組）
用dequeue將函數數組中的第一個函數取出，並執行(用shift()方法取出並執行）
也就意味著當再次執行dequeue的時候，得到的是另一個函數了。同時也意味著，如果不執行dequeue，那麼佇列中的下一個函數永遠不會執行。

對於一個元素上執行animate方法加動畫，jQuery內部也會將其加入名為 fx 的函數佇列。而對於多個元素要依序執行動畫，則必須我們手動設定隊列進行了。

一個例子，要兩個div依序向左移動：

複製程式碼程式碼如下:

div 1

div 2

我首先建立了一個函數數組，裡邊是一些列需要依次執行的動畫
然後我定義了一個回調函數，用dequeue方法用來執行隊列中的下一個函數
接著把這個函數數組放到document上的myAnimation的隊列中（可以選擇任何元素，我只是為了方便而把這個隊列放在document上）
最後我開始執行隊列中的第一個函數
這樣做的好處在於函數數組是線性展開，增減起來非常方便。而且，當不要要繼續進行接下來動畫的時候(例如用戶點了某個按鈕)，只需要清空那個隊列即可。而要增加更多則只需要加入隊列即可。

複製程式碼

程式碼如下:

//清除佇列$(document). queue("myAnimation",[]);
//加一個新的函數放在最後
$(document).queue(“myAnimation”,function(){alert("動畫真的結束了！ ")});

這當然也可以用於ajax之類的方法，如果需要一系列ajax交互，每個ajax都希望在前一個結束之後開始，之前最原始的方法就是用回調函數，但這樣太麻煩了。同樣利用queue新增佇列，每次ajax之後的回呼執行一次dequeue即可。

jQuery中動畫animate的佇列實現，下面用JavaScript模仿一個：

複製程式碼程式碼如下:

 程式碼如下:



 程式碼如下:


function Queue(){
 this.a = [];
 this.t = null;
}
Queue.prototype = {
 queue:function(s) {
  var self = this;
  this.a.push(s);
  this.hold();
  return this;
 },  return this;
 },hold:hold 
  var self = this;
  clearTimeout(this.t);
  this.t = setTimeout(function(){
   console.log("Queue start.,
   console.log("Queue starta); 🎜>   self.dequeue();
  },0);
 },
 dequeue:function(){
  var s = this.a.shift(this),f >  if(s){
   console.log("s:" s);
   setTimeout(function(){
    con );

},s); } }};var a = new Queue().queue(500).queue(200).queue(400).queue (1500).queue(300).queue(2000);