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:18px;
  4.     height:18px;
  5.     position:absolute;
  6.     top:10px;
  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即可。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM