整理一下關於jq佇列和回撥

驚蟄ins發表於2020-10-28

整理一下關於jq佇列和回撥

jq佇列

首先說一點jQuery的佇列依賴快取機制事件,它同時是animate的基礎
它不像事件機制、快取機制、回撥機制一樣有自己的名稱空間,由於比較簡單,所以直接掛在到$和jQuery物件上
它提供的基礎方法有

jQuery.extend({
    queue: function( elem, type, data ) {
  var queue;
    // 如果存在elem,也就是至少有一個引數
        if ( elem ) {
     // 如果有第二個引數,使用第二個引數加上“queue”,否則使用“fx” + “queue”(動畫佇列的名稱)
            type = ( type || "fx" ) + "queue";
     // 到jQuery內部使用的data_priv快取物件中去取已type為key的值
            queue = data_priv.get( elem, type );
     // 如果存在第三個引數
            if ( data ) {
       // 如果elem還沒有在cache中儲存過名為type的資料,或者需要儲存的資料時陣列
                if ( !queue || jQuery.isArray( data ) ) {
                    queue = data_priv.access( elem, type, jQuery.makeArray(data) );
       // 否則,直接將data推入到佇列中
                } else {
                    queue.push( data );
                }
            }
     // 返回佇列
            return queue || [];
        }
  }, // 將資料按照某種型別儲存到elem上
    dequeue: function( elem, type ) {}, // 從elem上刪除某種型別的資料
    _queueHooks: function( elem, type ) {} // 內部使用
});

jQuery.fn.extend({
    queue: function( type, data ) {},
    dequeue: function( type ) {},
    delay: function( time, type ) {},
    clearQueue: function( type ) {},
    promise: function( type, obj ) {}
});

jq使用Deferred

再簡單說一下 控制jq方法的執行順序
使用Deferred(從jQuery 1.5.0版本開始引入的一個新功能)來控制
簡單說一下使用方法:
首先註冊var def = $.Deferred();
註冊後var prs1 = def.then(自定義函式);
var prs2 = prs1.then(自定義函式); prs1函式執行完畢執行prs2函式
最後還需要觸發這個註冊 def.resolve(“0”);
即可
如上所述就可以控制程式的執行順序了
說一下jq這部分的原理
deferred物件是一個延遲物件,意思是函式延遲到某個點才開始執行,改變執行狀態的方法有兩個(成功:resolve和失敗:reject),分別對應兩種執行回撥(成功回撥函式:done和失敗回撥函式fail)
deferred物件的多種方法,下面給大家總結一下啊

    (1) $.Deferred() 生成一個deferred物件。

  (2) deferred.done() 指定操作成功時的回撥函式

  (3) deferred.fail() 指定操作失敗時的回撥函式

  (4) deferred.promise() 沒有引數時,返回一個新的deferred物件,該物件的執行狀態無法被改變;接受引數時,作用為在引數物件上部署deferred介面。

  (5) deferred.resolve() 手動改變deferred物件的執行狀態為"已完成",從而立即觸發done()方法。

  (6)deferred.reject() 這個方法與deferred.resolve()正好相反,呼叫後將deferred物件的執行狀態變為"已失敗",從而立即觸發fail()方法。

  (7) $.when() 為多個操作指定回撥函式。

除了這些方法以外,deferred物件還有二個重要方法,上面的教程中沒有涉及到。

  (8)deferred.then()

有時為了省事,可以把done()和fail()合在一起寫,這就是then()方法。

jq ajax回撥

這方面我直接說一下使用方法

function test(callback) {
    var lastCode = "";
    $.ajax({async : false,url:"",success:function(result){
        callback(result);
    }});
}
test(function(result){
    //可以做你想做的事情了
})

相關文章