Jquery回調(diào)對象與延遲對象怎么使用

這篇文章主要介紹“Jquery回調(diào)對象與延遲對象怎么使用”，在日常操作中，相信很多人在Jquery回調(diào)對象與延遲對象怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Jquery回調(diào)對象與延遲對象怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

一、回調(diào)對象Callbacks

jQuery 1.7 版本中新增的 jQuery.Callbacks() 函數(shù),返回一個多功能對象，此對象提供了一種強大的方法來管理回調(diào)列表。它能夠增加、刪除、觸發(fā)、禁用回調(diào)函數(shù)。

1、定義和用法

$.Callbacks() 指一個多用途的回調(diào)函數(shù)列表對象，提供了一種強大的方法來管理回調(diào)函數(shù)列對。

提示： $.Callbacks 是在 jQuery 內(nèi)部使用，如為 .ajax，$.Deferred 等組件提供基礎(chǔ)功能的函數(shù)。它也可以用在類似功能的一些組件中，如自己開發(fā)的插件。

$(function () { 
    function fn1( value ) {
        alert( value );
    }
    function fn2( value ) {
        fn1("fn2 says: " + value);
        return false;
    }
    var callbacks = $.Callbacks();
    callbacks.add( fn1 );    
    callbacks.fire( "foo!" );// 輸出: foo!    
    callbacks.add( fn2 );
    callbacks.fire( "bar!" );// 先執(zhí)行f1,再執(zhí)行f2。輸出: bar!, fn2 says: bar!
})

2、支持的 Flags 參數(shù)

這個 flags 參數(shù)是 $.Callbacks() 的一個可選參數(shù)， 結(jié)構(gòu)為一個用空格標記分隔的標志可選列表，用來改變回調(diào)列表中的行為 (比如. $.Callbacks( 'unique stopOnFalse' ))。 
以下是可用的 flags:

• once：確保這個回調(diào)列表只執(zhí)行一次

• memory：緩存上一次fire時的參數(shù)值，當add()添加回調(diào)函數(shù)時，直接用上一次的參數(shù)值立刻調(diào)用新加入的回調(diào)函數(shù)

• unique：一個回調(diào)只會被添加一次，不會重復(fù)添加

• stopOnFalse：某個回調(diào)函數(shù)返回false之后中斷后面的回調(diào)函數(shù)

下面是 $.Callbacks( "unique" ) 的一個例子

$(function () { 
    function fn1( value ) {
        alert( value );
    }
    function fn2( value ) {
        fn1("fn2 says: " + value);
        return false;
    }
    var callbacks = $.Callbacks( "unique" );
    callbacks.add( fn1 );
    callbacks.fire( "foo" );
    callbacks.add( fn1 ); // repeat addition
    callbacks.add( fn2 );
    callbacks.fire( "bar" );
    callbacks.remove( fn2 );
    callbacks.fire( "foobar" );
    /*輸出:
    foo
    bar
    fn2 says:bar
    foobar
    */
})

$.Callbacks() 支持一個列表設(shè)置多個flags（標識）而不僅僅是一個，有一個累積效應(yīng)，類似"&&"。 
下面是 $.Callbacks( 'unique memory' ) 的一個例子

$(function () { 
    function fn1( value ) {
        alert( value );
        return false;
    }
     
    function fn2( value ) {
        fn1( "fn2 says: " + value );
        return false;
    } 
    var callbacks = $.Callbacks( "unique memory" );
    callbacks.add( fn1 );
    callbacks.fire( "foo" );
    callbacks.add( fn1 ); // repeat addition
    callbacks.add( fn2 );
    callbacks.fire( "bar" );
    callbacks.add( fn2 );
    callbacks.fire( "baz" );
    callbacks.remove( fn2 );
    callbacks.fire( "foobar" ); 
    /*輸出:
    foo
    fn2 says:foo
    bar
    fn2 says:bar
    baz
    fn2 says:baz
    foobar*/
})

3、方法清單：

• callbacks.add()：回調(diào)列表中添加一個回調(diào)或回調(diào)的集合。

• callbacks.disable()：禁用回調(diào)列表中的回調(diào)

• callbacks.disabled()：確定回調(diào)列表是否已被禁用。

• callbacks.empty()：從列表中刪除所有的回調(diào).

• callbacks.fire()：用給定的參數(shù)調(diào)用所有的回調(diào)

• callbacks.fired()：訪問給定的上下文和參數(shù)列表中的所有回調(diào)。

• callbacks.fireWith()：訪問給定的上下文和參數(shù)列表中的所有回調(diào)。

• callbacks.has()：確定列表中是否提供一個回調(diào)

• callbacks.lock()：鎖定當前狀態(tài)的回調(diào)列表。

• callbacks.locked()：確定回調(diào)列表是否已被鎖定。

• callbacks.remove()：從回調(diào)列表中的刪除一個回調(diào)或回調(diào)集合。

二、延遲對象：deferred

在jQuery 1.5中新增了 Deferred 延遲對象，它是通過調(diào)用 jQuery.Deferred() 方法來創(chuàng)建的可鏈接的實用對象。它可注冊多個回調(diào)函數(shù)到回調(diào)列表，調(diào)用回調(diào)列表并且傳遞異步或同步功能的成功或失敗的狀態(tài)。 
延遲對象是可鏈接的，類似于一個 jQuery 對象可鏈接的方式，區(qū)別于它有自己的方法。在創(chuàng)建一個 Deferred 對象之后，您可以使用以下任何方法，直接鏈接到通過調(diào)用一個或多個的方法創(chuàng)建或保存的對象。

1、$.Deferred()定義和用法

$.Deferred() 是一個構(gòu)造函數(shù)，用來返回一個鏈式實用對象方法來注冊多個回調(diào)，并且調(diào)用回調(diào)隊列，傳遞任何同步或異步功能成功或失敗的狀態(tài)。

• $.Deferred() 構(gòu)造函數(shù)創(chuàng)建一個新的 Deferred（延遲）對象， jQuery.Deferred 可傳遞一個可選的函數(shù)，該函數(shù)在構(gòu)造方法返回之前被調(diào)用并傳遞一個新的 Deferred 對象作為函數(shù)的第一個參數(shù)。例如被調(diào)用的函數(shù)可以使用 deferred.then（）來附加回調(diào)函數(shù)。

• 一個 Deferred 對象開始于掛起狀態(tài)。任何使用 deferred.then(), deferred.always(), deferred.done(), 或者 deferred.fail() 添加到這個對象的回調(diào)函數(shù)都是排隊等待執(zhí)行的。調(diào)用 deferred.resolve() 或 eferred.resolveWith() 轉(zhuǎn)換延遲到解決狀態(tài)后立即執(zhí)行設(shè)置的 doneCallbacks 。調(diào)用 deferred.reject() 或 deferred.rejectWith() 轉(zhuǎn)換延遲到拒絕狀態(tài)后立即執(zhí)行設(shè)置的 failCallbacks 。一旦對象已經(jīng)進入了解決或拒絕狀態(tài)，它保持該狀態(tài)?；卣{(diào)仍然可以添加到已解決或已拒絕的 Deferred 對象——它們會立即執(zhí)行。

設(shè)定兩個延時時間是隨機的定時器，分別用于解決（resolve）和拒絕（reject）延遲對象

$(function () { 
    function asyncEvent(){
        var dfd = new jQuery.Deferred();
        // 在一個隨機的時間間隔之后 Resolve （解決狀態(tài)）
        setTimeout(function(){
            dfd.resolve("歡呼");
        }, Math.floor(400+Math.random()*2000));

        // 在一個隨機的時間間隔之后 reject （拒絕狀態(tài)）
        setTimeout(function(){
            dfd.reject("對不起");
        }, Math.floor(400+Math.random()*2000));

        // 每半秒顯示一個"working..."消息
        setTimeout(function working(){
            if ( dfd.state() === "pending" ) {
                dfd.notify("working... ");
                setTimeout(working, 500);
            }
        }, 1);
        // 返回 Promise 對象，調(diào)用者不能改變延遲對象
        return dfd.promise();
    }
    // 為異步函數(shù)附加一個done, fail, 和 progress 處理程序
    $.when( asyncEvent() ).then(
        function(status){
            alert( status+', 事情進展順利' );
        },
        function(status){
            alert( status+', 這次你失敗了' );
        },
        function(status){
            $("body").append(status);
        }
    );
})

2、deferred.promise()：

返回Deferred(延遲)的Promise對象。

• 方法允許一個異步函數(shù)阻止那些干涉其內(nèi)部請求的進度（progress）或狀態(tài)（status）的其它代碼。

• 只包含 deferred 對象的一組方法，包括：done(),then(),fail(),isResolved(), isRejected(), always(), 這些方法只能觀察一個 deferred 的狀態(tài)，而無法更改 deferred 對象的內(nèi)在狀態(tài)。

• deferred.promise()也可以接受一個 target 參數(shù)，此時傳入的 target 將被賦予 Promise 的方法，并作為結(jié)果返回，而不是創(chuàng)建一個新對象。 
  deferred.promise( [target ] ) ：使用目標參數(shù)

3、.promise()：

返回一個 Promise 對象用來觀察當某種類型的所有行動綁定到集合，排隊與否還是已經(jīng)完成。

• .promise() 方法返回一個動態(tài)生成的 Promise，當綁定到集合中的所有特定動作（action）已經(jīng)被加入或未被加入到隊列中時，生成的 Promise 將被受理（resolve）。

• type 的默認值是"fx" ，這意味著被受理（resolve）的 Promise 對象是在所有被選中元素的動畫都完成時返回的。

• 如果提供 target 參數(shù)，.promise() 在該參數(shù)上添加方法，然后返回這個對象，而不是創(chuàng)建一個新的。它適用于在一個已經(jīng)存在的對象上添加 Promise 行為的情況。

語法:.promise( [type ] [, target ] )

type:String類型 需要待觀察隊列類型。

target:PlainObject類型 將要綁定 promise 方法的對象。

在一個沒有激活動畫的集合上調(diào)用 .promise()

$(function () { 
    var div = $( "
" );
    div.promise().done(function( arg1 ) {
        alert( this === div && arg1 === div );//彈出 "true"
    });
})

當所有的動畫結(jié)束時(包括那些在動畫回調(diào)函數(shù)和之后添加的回調(diào)函數(shù)中初始化的動畫），受理（Resolve）返回的 Promise。

$(function () { 
    $( "button" ).on( "click", function() {
        $( "p" ).append( "已開始..." );

        $( "div" ).each(function( i ) {
            $( this ).fadeIn().fadeOut( 100 * ( i + 1 ) );
        });

        $( "div" ).promise().done(function() {
            $( "p" ).append( " 完成! " );
        });
    });
})

4、jQuery.when()：

提供一種方法來執(zhí)行一個或多個對象的回調(diào)函數(shù)， Deferred(延遲)對象通常表示異步事件。

5、方法清單：

• deferred.progress()：當Deferred（延遲）對象生成進度通知時，調(diào)用添加處理程序。

• deferred.done()：當Deferred（延遲）對象解決時，調(diào)用添加處理程序。

• deferred.fail()：當Deferred（延遲）對象拒絕時，調(diào)用添加處理程序。

• deferred.always()：當Deferred（延遲）對象解決或拒絕時，調(diào)用添加處理程序。

• deferred.catch()：當Deferred對象被拒絕(reject)時，調(diào)用添加的處理程序。

• deferred.notify()：根據(jù)給定的 args參數(shù) 調(diào)用Deferred（延遲）對象上進行中的回調(diào) （progressCallbacks）。

• deferred.notifyWith()：根據(jù)給定的上下文（context）和args遞延調(diào)用Deferred（延遲）對象上進行中的回調(diào)（progressCallbacks ）。

• deferred.resolve()：解決Deferred（延遲）對象，并根據(jù)給定的args參數(shù)調(diào)用任何完成回調(diào)函數(shù)（doneCallbacks）。

• deferred.resolveWith()：解決Deferred（延遲）對象，并根據(jù)給定的 context和args參數(shù)調(diào)用任何完成回調(diào)函數(shù)（doneCallbacks）。

• deferred.reject()：拒絕Deferred（延遲）對象，并根據(jù)給定的args參數(shù)調(diào)用任何失敗回調(diào)函數(shù)（failCallbacks）。

• deferred.rejectWith()：拒絕Deferred（延遲）對象，并根據(jù)給定的 context和args參數(shù)調(diào)用任何失敗回調(diào)函數(shù)（failCallbacks）。

• deferred.pipe()：實用的方法來過濾 and/or 鏈Deferreds。

• deferred.state()：確定一個Deferred（延遲）對象的當前狀態(tài)。

• deferred.then()：當Deferred（延遲）對象解決，拒絕或仍在進行中時，調(diào)用添加處理程序。

到此，關(guān)于“Jquery回調(diào)對象與延遲對象怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>