jQuery核心中, 有一組隊列控制方法, 這組方法由queue()/dequeue()/clearQueue()三個方法組成, 它對需要連續按序執行的函數的控制可以說是簡明自如, 主要應用於animate ()方法, ajax以及其他要按時間順序執行的事件中.
先解釋一下這組方法各自的含義.
queue(name,[callback] ): 當只傳入一個參數時, 它返回並指向第一個匹配元素的隊列(將是一個函數數組,隊列名默認是fx); 當有兩個參數傳入時, 第一個參數還是默認為fx的的隊列名, 第二個參數又分兩種情況, 當第二個參數是一個函數時, 它將在匹配的元素的隊列最後添加一個函數. 當第二個參數是一個函數數組時,它將匹配元素的隊列用新的一個隊列來代替(函數數組).可能, 這個理解起來有點暈.
dequeue(name): 這個好理解, 就是從隊列最前端移除一個佇列函數, 並執行它.
clearQueue([queueName]):這是1.4新增的方法. 清空物件上尚未執行的所有佇列. 參數可選,預設為fx. 但個人覺得這個方法沒多大用, 用queue()方法傳入兩個參數的第二種參數即可實現clearQueue方法.
現在, 我們要實現這樣一個效果, 有標有1至7的數字方塊,要求這七個方塊自左到右依序下落. 查看DEMO
css與html部分我就不貼出來了, DEMO中有. 若按常規做法, 可能需要用如下jQ代碼來實現:
$('.one').delay(500).animate({
top: ' =270px'
},
500,
function(>},
500,
function() {
$('.two').delay(500).animate({
top: ' =270px'
},
$('.三').delay(500).animate({
top: ' =270px'
function() {
$('.four').delay (500).animate({
top: ' =270px'
🎜> function() {
$('.五').delay(500). ({
top: ' =270px'
500,
function() {
},
function() {
top: ' =270px'
,
500,
alert('依序落體運動結束！是的！')
});
> });
});
});
});
🎜>🎜>🎜>🎜>🎜>🎜>🎜>🎜>🎜>🎜>🎜>🎜>🎜>🎜>🎜>
嗯，簡單，效果很完美的表現出來了，但是這種暈厥的代碼，你能忍受嗎？甚至可以忍受，如果這個時候，你想調整換一個某個的執行順序，比如說，你讓5落下然後開始下落3，或者新加8至15個八個方塊，怎麼辦？方法來實現這個效果，那就是jQuery佇列控制方法。
複製程式碼
程式碼如下：
var _slideFun = [function() {
$('.one').delay(500).animate({
500, _takeOne);
},
function() {
$('.two').delay(300).animate({
500, _takeOne);
},
function() {
$('.三').delay top > },
500, _takeOne);
},
function() {
$ '
},
500, _takeOne);
},
function() {
$('.五').delay(300) 2098> ' =270px'
},
500, _takeOne);
},
function(() {
$('.ss]).del(3) {
> top: ' =270px'
},
500, _takeOne);
},
function() {<.> top: ' =270px'
},
500,
function() {}];
$('#demo').queue('slideList', _slideFun);
var _takeOne = function() {
$('#demo').dequeue(' SlideList');
};
_takeOne();
這樣的身材，看起來已經不是簡明多了。 新建一個佇列，把動畫函數依序去（這樣改變順序，新加動畫不是方便多了？）；
2. 使用佇列將這組動畫函數加入slideList佇列;
3. 使用dequeue取出slideList佇列中第一個函數，並執行它；
4. 最初執行第一個函數。
至於clearQueue()方法，就不說了，練習中停止呼叫按鈕的就是clearQueue()方法，當然你還可以用queue()方法直接將現在的函數列隊替換成[]空隊列實現(個人)比較推薦空倉庫替換.,更直觀).
