作者:禪樓望月( http://www.cnblogs.com/yaoyinglong ) 隊列是一種特殊的線性表,它的特殊之處在於他只允許在頭部進行刪除,在尾部進行插入。常用來表示先進先出的操作(FIFO)--先進隊列的元素先出隊。搜索整個jQuery庫會發現,queue在jQuery內部僅供給a... ...
作者:禪樓望月( http://www.cnblogs.com/yaoyinglong )
隊列是一種特殊的線性表,它的特殊之處在於他只允許在頭部進行刪除,在尾部進行插入。常用來表示先進先出的操作(FIFO)--先進隊列的元素先出隊。
搜索整個jQuery庫會發現,queue在jQuery內部僅供給animate動畫來使用。它提供了對外的介面,因此程式員也可以使用隊列來完成一些特殊需求。
queue模塊對外開放的API:
工具方法:queue
,dequeue
,_queueHooks
(僅內部使用)
實例方法:queue
,dequeue
,delay
,clearQueue
,promise
1 基本用法
jQuery的隊列面向的是函數,如果你傳遞進去的不是函數,jQuery在出隊的時候會出錯,因為出隊的時候,jQuery會執行該函數。
它比Deferred更強大,可以同時支持多個非同步操作。在jQuery源碼中,jQuery主要是為了完成運動(animate)。在隊列中預設的隊列名字為fx,animate所用的隊列名字就是它。所以,如果省略了隊列的名字,就會將函數添加到fx隊列中。
1.1 queue
工具方法中有三個可選參數:
- element:附加列隊的DOM元素(不是**jQuery**元素);
- queueName:字元串值,包含序列的名稱。預設是 fx, 標準的效果序列;
- callback:要添加進隊列的函數,它還可以是一個函數數組。
① 創建隊列,並添加一個函數
function callback1() {
console.log("callback1");
}
$.queue($("#div1")[0],"q1",callback1);
② 獲取隊列
當只有兩個參數的時候,表示獲取element下queueName名稱的隊列
console.log($.queue($("#div1")[0],"q1"));
$.queue($("#div1")[0],"q1",callback1);
$.queue($("#div1")[0],"q1",[callback2,callback3]);
但是,這時並不是向現有的隊列中繼續添加[callback1,callback2],而是先將隊列清空再添加[callback2,callback3];
console.log($.queue($("#div1")[0],"q1"));
1.2 dequeue
從隊列最前端移除一個隊列函數,並執行它。因此當回調有N個時,需要調用.dequeue
方法N次元素才全部出列。.dequeue
方法N次元素才全部出列。.dequeue
的第一個參數是dom元素,第二個參數是queueName
function callback1() {console.log("callback1");}
function callback2() {console.log("callback2");}
function callback3() {console.log("callback3");}
var div1=document.getElementById("div1");
$.queue(div1,"q1",[callback1,callback2,callback3]);
setInterval(function () {$.dequeue(div1,"q1");},2000);
這些回調函數的上下文是