jQuery佇列控制方法詳解queue()/dequeue()/clearQueue()-js教程-PHP中文網

jQuery佇列控制方法詳解queue()/dequeue()/clearQueue()

巴扎黑

發布： 2017-06-20 15:08:52

原創

1244 人瀏覽過

jQuery核心中, 有一組隊列控制方法, 這組方法由queue()/dequeue()/clearQueue()三個方法組成, 它對需要連續按序執行的函數的控制可以說是簡明自如, 主要應用於animate ()方法, ajax以及其他要按時間順序執行的事件中.

#先解釋一下這組方法各自的意義.
queue(name,[callback]): 當只傳入一個參數時, 它返回並指向第一個匹配元素的隊列(將是一個函數數組,隊列名預設是fx); 當有兩個參數傳入時, 第一個參數還是預設為fx的的隊列名, 第二個參數又分兩種情況, 當第二個參數是一個函數時, 它將在匹配的元素的隊列最後添加一個函數. 當第二個參數是一個函數數組時,它將匹配元素的隊列用新的一個隊列來代替(函數數組).可能, 這個理解起來有點暈, 稍後,後面會有點此查看DEMO.

dequeue(name): 這個好理解, 就是從隊列最前端移除一個隊列函數, 並執行它.
clearQueue ([queueName]):這是1.4新增的方法. 清空物件上尚未執行的所有佇列.參數可選,預設fx. 但個人覺得這個方法沒多大用, 用queue()方法傳入兩個參數的第二種參數即可實現clearQueue方法.
現在, 我們要實現這樣一個效果, 有標有1至7的數字方塊, 要求這七個方塊自左到右依序下落.點此查看DEMO

#css與html部分我就不貼出來了,DEMO演示中有. 若按常規做法, 可能需要用如下jQ代碼來實現:

$(&#39;.one&#39;).delay(500).animate({top:&#39;+=270px&#39;},500,function(){
		$(&#39;.two&#39;).delay(500).animate({top:&#39;+=270px&#39;},500,function(){
			$(&#39;.three&#39;).delay(500).animate({top:&#39;+=270px&#39;},500,function(){
				$(&#39;.four&#39;).delay(500).animate({top:&#39;+=270px&#39;},500,function(){
					$(&#39;.five&#39;).delay(500).animate({top:&#39;+=270px&#39;},500,function(){
						$(&#39;.six&#39;).delay(500).animate({top:&#39;+=270px&#39;},500,function(){
							$(&#39;.seven&#39;).animate({top:&#39;+=270px&#39;},500,function(){
								alert(&#39;按序落体运动结束! Yeah!&#39;)
							});
						});
					});
				});
			});
		});
	});

登入後複製

嗯, 沒錯, 效果很完美的呈現給出來了, 但這種暈眩的代碼,你能忍受嗎? 即便可以忍受, 如果此時, 你想調換一個某個的執行順序, 比如, 你想讓5落下後再開始下落3, 或者新加8至15八個方塊, 怎麼辦? 重寫嗎? 在裡面小心冀冀的改嗎? 顯然, 我們需要另外一種列簡明便捷的方法來實現這個效果, 那就是jQuery隊列控制方法.請看如下代碼:

var _slideFun=[
	function(){$(&#39;.one&#39;).delay(500).animate({top:&#39;+=270px&#39;},500,_takeOne);},
	function(){$(&#39;.two&#39;).delay(300).animate({top:&#39;+=270px&#39;},500,_takeOne);},
	function(){$(&#39;.three&#39;).delay(300).animate({top:&#39;+=270px&#39;},500,_takeOne);},
	function(){$(&#39;.four&#39;).delay(300).animate({top:&#39;+=270px&#39;},500,_takeOne);},
	function(){$(&#39;.five&#39;).delay(300).animate({top:&#39;+=270px&#39;},500,_takeOne);},
	function(){$(&#39;.six&#39;).delay(300).animate({top:&#39;+=270px&#39;},500,_takeOne);},
	function(){$(&#39;.seven&#39;).delay(300).animate({top:&#39;+=270px&#39;},500,function(){
		alert(&#39;按序落体运动结束! Yeah!&#39;);
	});}
];
$(&#39;#demo&#39;).queue(&#39;slideList&#39;,_slideFun);
var _takeOne=function(){
	$(&#39;#demo&#39;).dequeue(&#39;slideList&#39;);
};
_takeOne();

登入後複製

這樣一來, 看起來是不是簡明多了. 如何實現?
1. 新建一個數組,把動畫函數依次放進去(這樣更改順序,新加動畫是不是方便多了?);
2. 用queue將這組動畫函數數組加入到slideList隊列中;
3. 用dequeue取出slideList隊列中第一個函數, 並執行它;
4. 初始執行第一個函數.
DEMO演示中也有詳解的註釋, 如果上面的說明還看不明白,請看源碼.
至於clearQueue()方法,就不多說了, 演示中停止按鈕調用的就是clearQueue()方法,當然你還可以用queue()方法直接將現在的函數列隊替換成[]空數組實現(個人比較推薦空數組替換.,更直觀).

以上是jQuery佇列控制方法詳解queue()/dequeue()/clearQueue()的詳細內容。更多資訊請關注PHP中文網其他相關文章！