queue() 方法顯示或操作在匹配元素上執行的函數隊列。
queue和dequeue的過程主要是:
用queue把函數加入隊列(通常是函數數組)
用dequeue將函數數組中的第一個函數取出,並執行(用shift()方法取出並執行)
也就意味著當再次執行dequeue的時候,得到的是另一個函數了。同時也意味著,如果不執行dequeue,那麼隊列中的下一個函數永遠不會執行。
對於一個元素上執行animate方法加動畫,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中動畫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;
},
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);