jQuery中queue和dequeue的用法

jQuery中的queue和dequeue是一組很有用的方法，他們對於一系列需要按次序啟動並執行函數特別有用。特別animate動畫，ajax，以及timeout等需要一定時間的函數

queue和dequeue的過程主要是：
1，用queue把函數排入佇列（通常是函數數組）
2，用dequeue將函數數組中的第一個函數取出，並執行(用shift()方法取出並執行）

也就意味著當再次執行dequeue的時候，得到的是另一個函數了
同時也意味著，如果不執行dequeue，那麼隊列中的下一個函數永遠不會執行

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

一個例子，要兩個div依次向左移動，點擊這裡查看

1. div {
2.     background: #aaa ;
3.     width: 18 px ;
4.     height: 18 px ;
5.     position: absolute ;
6.     top: 10 px ;
7. }

1. < div id = " block1 " ></ div >
2. < div   id = " block2 " ></ div >

如果只是輪流移動次數較少，可以使用animate的回呼函數來做，一個動畫放在另一個動畫的回調裡邊
比如

1. $ ( " #block1 " ) . animate ({ left : " +=100 " } , function () {
2.     $ ( " #block2 " ) . animate ({ left : " +=100 " } , function ()   {
3.         $ ( " #block1 " ) . animate ({ left : " +=100 " } , function ()   {
4.             $ ( " #block2 " ) . animate ({ left : " +=100 " } , function ()   {
5.                 $ ( " #block1 " ) . animate ({ left : " +=100 " } , function (){
6.                     alert ( " 動畫結束 " ) ;
7.                 }) ;
8.             }) ;
9.         }) ;
10.     }) ;
11. }) ;

但這種方法當動畫較多的時候簡直是殘忍。

此時利用queue和dequeue則顯得簡單很多：

1. var FUNC = [
2.     function ()   { $ ( " #block1 " ) . animate ({ left : " +=100 " } , aniCB ) ; } ,
3.     function ()   { $ ( " #block2 " ) . animate ({ left : " +=100 " } , aniCB ) ; } ,
4.     function ()   { $ ( " #block1 " ) . animate ({ left : " +=100 " } , aniCB ) ; } ,
5.     function ()   { $ ( " #block2 " ) . animate ({ left : " +=100 " } , aniCB ) ; } ,
6.     function ()   { $ ( " #block1 " ) . animate ({ left : " +=100 " } , aniCB ) ; } ,
7.     function (){ alert ( " 動畫結束 " )}
8. ] ;
9. var   aniCB = function () {
10.     $ ( document ) . dequeue ( " myAnimation " ) ;
11. }
12. $ ( document ) . queue ( " myAnimation " , FUNC ) ;
13. aniCB () ;

1，我首先建議了一個函數數組，裡邊是一些列需要依次執行的動畫
2，然後我定義了一個回呼函數，用dequeue方法用來執行隊列中的下一個函數
3，接著把這個函數數組放到document上的myAnimation的隊列中（可以選擇任何元素，我只是為了方便而把這個隊列放在document上）
4，最後我開始執行隊列中的第一個函數

這樣做的好處在於函數數組是線性展開，增減起來非常方便。
而且，當不要要繼續進行接下來動畫的時候(比如使用者點了某個按鈕)，只需要清空那個隊列即可。而要增加更多則只需要排入佇列即可

1. //清空隊列
2. $ ( document ) . queue ( " myAnimation " , []) ;
3. //加一個新的函數放在最後
4. $ ( document ) . queue ( " myAnimation " , function (){ alert ( " 動畫真的結束了！ " )}) ;

以前發過一個wait外掛程式，用於讓動畫之間可以暫停一段時間
http://shawphy.com/2008/07/enabling-settimout-within-chained-functions-in-jquery.html
可以看一下，他也就是利用了這個原理，預設在fx中插入一個timeout，放到隊列中，直到timeout結束後才執行dequeue繼續執行隊列中的下一個函數。

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

如果沒有使用jQuey庫，也可以自己寫段簡易代碼來解決這個問題。見控制隊列函數