亚洲伊人色欲综合网一,av一区二区三区苍井空

              queue與dequeue 
              
            $.queue : 顯示或操作匹配的元素上已經執行的函數列隊

這個方法有兩個作用，它既是 setter，又是 getter。第一個參數 elem 是 DOM 元素，第二個參數 type 是字符串，第三個參數 data 可以是 function 或數組。
var body = $('body');
function cb1() {alert(1)}
function cb2() {alert(2)}

//set，第三個參數是函數
$.queue(body, 'aa', cb1); 
$.queue(body, 'aa', cb2); 

//get
$.queue(body, 'aa')  //[function ,function]
這個方法有點類型 get 有點類似隊列的 push 操作，jQuery 的方法的接口重載是非常嚴重的，經常同一個接口即是 set 也是 get，不管符不符合基本原則，但是它卻很實用。無非就是把數據給緩存起來，為什么載體是一個jQuery對象，因為保存數據的手段是通過data數據緩存實現的。
queue: function(elem, type, data) {
   //參考右邊實現
}
data 與 jQuery 對象之間是通過 uuid 建立了一個無耦合的映射關系，具體可以翻閱之前的關于“數據緩存”，源碼有一個默認處理 type = (type || "fx") + "queue" 可見是專職供fx動畫隊列處理的。



$.dequeue : 匹配的元素上執行隊列中的下一個函數
var body = $('body');
function cb1() {console.log(11111)}
function cb2() {console.log(22222)}
//set
$.queue(body, 'aa', cb1); // 第三個參數為function
$.queue(body, 'aa', cb2);

$.dequeue(body, 'aa')  //11
$.dequeue(body, 'aa')  //22出列就有點類似 shift 的操作，但是不同的是還會執行這個 cb1 與 cb2，將回調函數出列執行，每調用一次僅出列一個，因此當回調有 N 個時，需要調用 $.dequeue 方法 N 次元素才全部出列，來看看源碼：
var dequeue = jQuery.queue(elem, type),
  //參考右邊實現
};
知道原理了， 這個就很簡單了，通過 queue 的 get 取出隊列的所有數據，判斷一下長度，然后截取出第一個，然后做好一個預處理生成下一個的 next。
 
這里有一個hooks？


仔細分析下這個內部 queueHooks
_queueHooks: function(elem, type) {
    var key = type + "queueHooks";
    return data_priv.get(elem, key) || data_priv.access(elem, key, {
        empty: jQuery.Callbacks("once memory").add(function() {
            data_priv.remove(elem, [type + "queue", key]);
        })
    });
}我們說了dequeue不僅是取出來還需要執行，在執行的時候把next與hooks傳遞給外部的回調，這就是js的邏輯上的很繞的地方，在內部可以傳遞一個引用出去，又能提供外部調用或者執行。
fn.call(elem, next, hooks)因為傳遞了next，所以我們的代碼可以參考右邊代碼，next內部仍然調用$.dequeue，這樣可以接著執行隊列中的下一個 callback，$.dequeue 里的 hooks 是當隊列里所有的 callback 都執行完后(此時 startLength 為0)進行最后的一個清理工作。
if ( !startLength && hooks ) {
    hooks.empty.fire();
}鉤子其實就是 jQuery.Callbacks 對象,可以實現一個收集器的功能，至于在什么情況下時候，之后動畫中開始分析，所以隊列的本質是利用 Array 的 push 和 shift 來完成先進先出(First In First Out)，但是這個方法的缺點也很明顯，無法單獨做一個獨立的模塊處理，因為它必須要跟 jQuery 對象吻合，而且對傳遞的數據只能是函數。
任務

                  
                    ?不會了怎么辦
                    

                  
                

index.html

<!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <script src="http://code.jquery.com/jquery-latest.js"></script> <title></title> </head> <body> <button id="test1">$.queue</button> <button id="test2">模擬queue</button> <button id="test3">$.dequeue</button> <button id="test4">模擬dequeue</button> <ul></ul> <script type="text/javascript"> /** * 顯示或操作匹配的元素上已經執行的函數列隊。 */ function queue(elem, type, data) { var queue; if (elem) { type = (type || "fx") + "queue"; //獲取隊列數據 //data_priv.get(elem, type); queue = $(elem).data(type); // 如果傳遞了數據，這存在緩存中 if (data) { if (!queue || jQuery.isArray(data)) { //data_priv.access queue = $.data(elem, type, jQuery.makeArray(data)) } else { queue.push(data); } } return queue || []; } } function dequeue(elem, type) { type = type || "fx"; //取出隊列 var queue = jQuery.queue(elem, type), startLength = queue.length, //取出第一個隊列 fn = queue.shift(), hooks = jQuery._queueHooks(elem, type), next = function() { jQuery.dequeue(elem, type); }; // If the fx queue is dequeued, always remove the progress sentinel if (fn === "inprogress") { fn = queue.shift(); startLength--; } if (fn) { // Add a progress sentinel to prevent the fx queue from being // automatically dequeued // 如果開始執行，就需要加一個進程鎖 // 如果是dequeue操作, 去掉鎖, 執行隊列里的函數, 同時給隊列加上鎖. // 如果是queue操作, 要看鎖的狀態, 如果被鎖上了, 就只執行隊列的添加操作. 不再調用dequeue. if (type === "fx") { queue.unshift("inprogress"); } // clear up the last queue stop function delete hooks.stop; fn.call(elem, next, hooks); } if (!startLength && hooks) { hooks.empty.fire(); } } var body = $('body')[0]; function cb1() { alert(1) } function cb2() { alert(2) } function clear(){ $('body').removeData(); } $("#test1").click(function() { $.queue(body, 'aa', cb1); $.queue(body, 'aa', cb2); alert($.queue(body, 'aa')) }) $("#test2").click(function() { clear() queue(body, 'aa', cb1); queue(body, 'aa', cb2); alert(queue(body, 'aa')) }) $("#test3").click(function() { //set $.queue(body, 'aa', cb1); // 第三個參數為function $.queue(body, 'aa', cb2); alert($.dequeue(body, 'aa')) //11 alert($.dequeue(body, 'aa')) //11 }) $("#test4").click(function() { show(ajaxConvertXML(xml)) }) </script> </body> </html>

提問題

提交

其他問答

查看更多本節問答

寫筆記

公開筆記

提交

全屏

請驗證，完成請求

由于請求次數過多，請先驗證，完成再次請求

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

7-2 queue與dequeue

queue與dequeue

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

7-2 queue與dequeue

熱搜

最近搜索清空

queue與dequeue

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

收藏課程后，能更快找到我哦～