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

先解釋一下這組方法各自的含義.

queue(name,[callback]): 當(dāng)只傳入一個參數(shù)時, 它返回并指向第一個匹配元素的隊列(將是一個函數(shù)數(shù)組,隊列名默認(rèn)是fx); 當(dāng)有兩個參數(shù)傳入時, 第一個參數(shù)還是默認(rèn)為fx的的隊列名, 第二個參數(shù)又分兩種情況, 當(dāng)?shù)诙€參數(shù)是一個函數(shù)時, 它將在匹配的元素的隊列最后添加一個函數(shù). 當(dāng)?shù)诙€參數(shù)是一個函數(shù)數(shù)組時,它將匹配元素的隊列用新的一個隊列來代替(函數(shù)數(shù)組).可能, 這個理解起來有點暈.

dequeue(name): 這個好理解, 就是從隊列最前端移除一個隊列函數(shù), 并執(zhí)行它.

clearQueue([queueName]):這是1.4新增的方法. 清空對象上尚未執(zhí)行的所有隊列. 參數(shù)可選,默認(rèn)為fx. 但個人覺得這個方法沒多大用, 用queue()方法傳入兩個參數(shù)的第二種參數(shù)即可實現(xiàn)clearQueue方法.

現(xiàn)在, 我們要實現(xiàn)這樣一個效果, 有標(biāo)有1至7的數(shù)字方塊, 要求這七個方塊自左到右依次下落. 查看DEMO
css與html部分我就不貼出來了, DEMO中有. 若按常規(guī)做法, 可能需要用如下jQ代碼來實現(xiàn):

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

這樣一來, 看起來是不是簡明多了. 如何實現(xiàn)?
1. 新建一個數(shù)組,把動畫函數(shù)依次放進(jìn)去(這樣更改順序,新加動畫是不是方便多了?);
2. 用queue將這組動畫函數(shù)數(shù)組加入到slideList隊列中;
3. 用dequeue取出slideList隊列中第一個函數(shù), 并執(zhí)行它;
4. 初始執(zhí)行第一個函數(shù).

至于clearQueue()方法,就不多說了, 演示中停止按鈕調(diào)用的就是clearQueue()方法,當(dāng)然你還可以用queue()方法直接將現(xiàn)在的函數(shù)列隊替換成[]空數(shù)組實現(xiàn)(個人比較推薦空數(shù)組替換.,更直觀).