jQuery中的queue和dequeue之間的用法區別

來源：懂視網責編：小采時間：2020-11-27 20:19:20

jQuery中的queue和dequeue之間的用法區別

jQuery中的queue和dequeue之間的用法區別:jQuery中的queue和dequeue是一組很有用的方法，他們對于一系列需要按次序運行的函數特別有用。特別animate動畫，ajax，以及timeout等需要一定時間的函數queue和dequeue的過程主要是：1，用queue把函數加入隊列（通常是函數數組）2，用dequeue將函數數

推薦度：

點擊下載本文 文檔為doc格式

導讀jQuery中的queue和dequeue之間的用法區別:jQuery中的queue和dequeue是一組很有用的方法，他們對于一系列需要按次序運行的函數特別有用。特別animate動畫，ajax，以及timeout等需要一定時間的函數queue和dequeue的過程主要是：1，用queue把函數加入隊列（通常是函數數組）2，用dequeue將函數數

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

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

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

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

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

 div {
 background:#aaa;
 width:18px;
 height:18px;
 position:absolute;
 top:10px;
 }

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

 $(“#block1″).animate({left:”+=100″},function() {
 $(“#block2″).animate({left:”+=100″},function() {
 $(“#block1″).animate({left:”+=100″},function() {
 $(“#block2″).animate({left:”+=100″},function() {
 $(“#block1″).animate({left:”+=100″},function(){
 alert(“動畫結束”);
 });
 });
 });
 });
 });

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

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

var FUNC=[
 function() {$("#block1").animate({left:"+=100"},aniCB);},
 function() {$("#block2").animate({left:"+=100"},aniCB);},
 function() {$("#block1").animate({left:"+=100"},aniCB);},
 function() {$("#block2").animate({left:"+=100"},aniCB);},
 function() {$("#block1").animate({left:"+=100"},aniCB);},
 function(){alert("動畫結束")}
 ];
 var aniCB=function() {
 $(document).dequeue(“myAnimation”);
 }
 $(document).queue(“myAnimation”,FUNC);
 aniCB();

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

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

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

以前發過一個wait插件，用于讓動畫之間可以暫停一段時間

可以看一下，他也就是利用了這個原理，默認在fx中插入一個timeout，放到隊列中，直到timeout結束后才執行dequeue繼續執行隊列中的下一個函數。

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

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

jQuery中的queue和dequeue之間的用法區別

推薦度：

點擊下載本文 文檔為doc格式

標簽：使用用法的區別

熱門焦點

jQuery中的queue和dequeue之間的用法區別

jQuery中的queue和dequeue之間的用法區別

jQuery中的queue和dequeue之間的用法區別

最新推薦

猜你喜歡

熱門推薦