Jquery回調(diào)對象與延遲對象用法詳解
一、回調(diào)對象Callbacks
jQuery 1.7 版本中新增的 jQuery.Callbacks() 函數(shù),返回一個(gè)多功能對象,此對象提供了一種強(qiáng)大的方法來管理回調(diào)列表。它能夠增加、刪除、觸發(fā)、禁用回調(diào)函數(shù)。
1、定義和用法
$.Callbacks() 指一個(gè)多用途的回調(diào)函數(shù)列表對象,提供了一種強(qiáng)大的方法來管理回調(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ù)
這個(gè) flags 參數(shù)是 $.Callbacks() 的一個(gè)可選參數(shù), 結(jié)構(gòu)為一個(gè)用空格標(biāo)記分隔的標(biāo)志可選列表,用來改變回調(diào)列表中的行為 (比如. $.Callbacks( 'unique stopOnFalse' ))。
以下是可用的 flags:
- once:確保這個(gè)回調(diào)列表只執(zhí)行一次
- memory:緩存上一次fire時(shí)的參數(shù)值,當(dāng)add()添加回調(diào)函數(shù)時(shí),直接用上一次的參數(shù)值立刻調(diào)用新加入的回調(diào)函數(shù)
- unique:一個(gè)回調(diào)只會被添加一次,不會重復(fù)添加
- stopOnFalse:某個(gè)回調(diào)函數(shù)返回false之后中斷后面的回調(diào)函數(shù)
下面是 $.Callbacks( "unique" ) 的一個(gè)例子
$(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() 支持一個(gè)列表設(shè)置多個(gè)flags(標(biāo)識)而不僅僅是一個(gè),有一個(gè)累積效應(yīng),類似"&&"。
下面是 $.Callbacks( 'unique memory' ) 的一個(gè)例子
$(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)列表中添加一個(gè)回調(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():確定列表中是否提供一個(gè)回調(diào)
- callbacks.lock():鎖定當(dāng)前狀態(tài)的回調(diào)列表。
- callbacks.locked():確定回調(diào)列表是否已被鎖定。
- callbacks.remove():從回調(diào)列表中的刪除一個(gè)回調(diào)或回調(diào)集合。
二、延遲對象:deferred
在jQuery 1.5中新增了 Deferred 延遲對象,它是通過調(diào)用 jQuery.Deferred() 方法來創(chuàng)建的可鏈接的實(shí)用對象。它可注冊多個(gè)回調(diào)函數(shù)到回調(diào)列表,調(diào)用回調(diào)列表并且傳遞異步或同步功能的成功或失敗的狀態(tài)。
延遲對象是可鏈接的,類似于一個(gè) jQuery 對象可鏈接的方式,區(qū)別于它有自己的方法。在創(chuàng)建一個(gè) Deferred 對象之后,您可以使用以下任何方法,直接鏈接到通過調(diào)用一個(gè)或多個(gè)的方法創(chuàng)建或保存的對象。
1、$.Deferred()定義和用法
$.Deferred() 是一個(gè)構(gòu)造函數(shù),用來返回一個(gè)鏈?zhǔn)綄?shí)用對象方法來注冊多個(gè)回調(diào),并且調(diào)用回調(diào)隊(duì)列,傳遞任何同步或異步功能成功或失敗的狀態(tài)。
- $.Deferred() 構(gòu)造函數(shù)創(chuàng)建一個(gè)新的 Deferred(延遲)對象, jQuery.Deferred 可傳遞一個(gè)可選的函數(shù),該函數(shù)在構(gòu)造方法返回之前被調(diào)用并傳遞一個(gè)新的 Deferred 對象作為函數(shù)的第一個(gè)參數(shù)。例如被調(diào)用的函數(shù)可以使用 deferred.then()來附加回調(diào)函數(shù)。
- 一個(gè) Deferred 對象開始于掛起狀態(tài)。任何使用 deferred.then(), deferred.always(), deferred.done(), 或者 deferred.fail() 添加到這個(gè)對象的回調(diào)函數(shù)都是排隊(duì)等待執(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)進(jìn)入了解決或拒絕狀態(tài),它保持該狀態(tài)?;卣{(diào)仍然可以添加到已解決或已拒絕的 Deferred 對象——它們會立即執(zhí)行。
設(shè)定兩個(gè)延時(shí)時(shí)間是隨機(jī)的定時(shí)器,分別用于解決(resolve)和拒絕(reject)延遲對象
$(function () {
function asyncEvent(){
var dfd = new jQuery.Deferred();
// 在一個(gè)隨機(jī)的時(shí)間間隔之后 Resolve (解決狀態(tài))
setTimeout(function(){
dfd.resolve("歡呼");
}, Math.floor(400+Math.random()*2000));
// 在一個(gè)隨機(jī)的時(shí)間間隔之后 reject (拒絕狀態(tài))
setTimeout(function(){
dfd.reject("對不起");
}, Math.floor(400+Math.random()*2000));
// 每半秒顯示一個(gè)"working..."消息
setTimeout(function working(){
if ( dfd.state() === "pending" ) {
dfd.notify("working... ");
setTimeout(working, 500);
}
}, 1);
// 返回 Promise 對象,調(diào)用者不能改變延遲對象
return dfd.promise();
}
// 為異步函數(shù)附加一個(gè)done, fail, 和 progress 處理程序
$.when( asyncEvent() ).then(
function(status){
alert( status+', 事情進(jìn)展順利' );
},
function(status){
alert( status+', 這次你失敗了' );
},
function(status){
$("body").append(status);
}
);
})2、deferred.promise():
返回Deferred(延遲)的Promise對象。
- 方法允許一個(gè)異步函數(shù)阻止那些干涉其內(nèi)部請求的進(jìn)度(progress)或狀態(tài)(status)的其它代碼。
- 只包含 deferred 對象的一組方法,包括:done(),then(),fail(),isResolved(), isRejected(), always(), 這些方法只能觀察一個(gè) deferred 的狀態(tài),而無法更改 deferred 對象的內(nèi)在狀態(tài)。
- deferred.promise()也可以接受一個(gè) target 參數(shù),此時(shí)傳入的 target 將被賦予 Promise 的方法,并作為結(jié)果返回,而不是創(chuàng)建一個(gè)新對象。
deferred.promise( [target ] ) :使用目標(biāo)參數(shù)
3、.promise():
返回一個(gè) Promise 對象用來觀察當(dāng)某種類型的所有行動綁定到集合,排隊(duì)與否還是已經(jīng)完成。
- .promise() 方法返回一個(gè)動態(tài)生成的 Promise,當(dāng)綁定到集合中的所有特定動作(action)已經(jīng)被加入或未被加入到隊(duì)列中時(shí),生成的 Promise 將被受理(resolve)。
- type 的默認(rèn)值是"fx" ,這意味著被受理(resolve)的 Promise 對象是在所有被選中元素的動畫都完成時(shí)返回的。
- 如果提供 target 參數(shù),.promise() 在該參數(shù)上添加方法,然后返回這個(gè)對象,而不是創(chuàng)建一個(gè)新的。它適用于在一個(gè)已經(jīng)存在的對象上添加 Promise 行為的情況。
語法:.promise( [type ] [, target ] )
type:String類型 需要待觀察隊(duì)列類型。
target:PlainObject類型 將要綁定 promise 方法的對象。
在一個(gè)沒有激活動畫的集合上調(diào)用 .promise()
$(function () {
var div = $( "
" );
div.promise().done(function( arg1 ) {
alert( this === div && arg1 === div );//彈出 "true"
});
})當(dāng)所有的動畫結(jié)束時(shí)(包括那些在動畫回調(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í)行一個(gè)或多個(gè)對象的回調(diào)函數(shù), Deferred(延遲)對象通常表示異步事件。
5、方法清單:
- deferred.progress():當(dāng)Deferred(延遲)對象生成進(jìn)度通知時(shí),調(diào)用添加處理程序。
- deferred.done():當(dāng)Deferred(延遲)對象解決時(shí),調(diào)用添加處理程序。
- deferred.fail():當(dāng)Deferred(延遲)對象拒絕時(shí),調(diào)用添加處理程序。
- deferred.always():當(dāng)Deferred(延遲)對象解決或拒絕時(shí),調(diào)用添加處理程序。
- deferred.catch():當(dāng)Deferred對象被拒絕(reject)時(shí),調(diào)用添加的處理程序。
- deferred.notify():根據(jù)給定的 args參數(shù) 調(diào)用Deferred(延遲)對象上進(jìn)行中的回調(diào) (progressCallbacks)。
- deferred.notifyWith():根據(jù)給定的上下文(context)和args遞延調(diào)用Deferred(延遲)對象上進(jìn)行中的回調(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():實(shí)用的方法來過濾 and/or 鏈Deferreds。
- deferred.state():確定一個(gè)Deferred(延遲)對象的當(dāng)前狀態(tài)。
- deferred.then():當(dāng)Deferred(延遲)對象解決,拒絕或仍在進(jìn)行中時(shí),調(diào)用添加處理程序。
到此這篇關(guān)于Jquery回調(diào)對象與延遲對象的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
使用FlexiGrid實(shí)現(xiàn)Extjs表格效果方法分享
這篇文章主要分享了使用FlexiGrid實(shí)現(xiàn)Extjs表格效果方法,非常的實(shí)用,這里推薦給有相同需求的小伙伴2014-12-12
省市區(qū)三級聯(lián)動jquery實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)紹了省市區(qū)三級聯(lián)動jquery實(shí)現(xiàn)代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10
Javascript jquery css 寫的簡單進(jìn)度條控件
很多的時(shí)候用戶需要等待你“臃腫”的 Javascript 代碼處理完成(Web 2.0 的特色)。期間或許加入一個(gè)類似于進(jìn)度條的東西讓用戶有點(diǎn)“安慰”。這個(gè)東西實(shí)現(xiàn)起來并不復(fù)雜,無非就是獲得總的處理?xiàng)l目,然后獲得一個(gè)百分比,再顯示輸出。2008-03-03
基于jquery實(shí)現(xiàn)一個(gè)滾動的分步注冊向?qū)?附源碼
使用jQuery實(shí)現(xiàn)很多很有意思的應(yīng)用效果。我們在很多網(wǎng)站注冊會員時(shí),需要填寫注冊表單,包括登錄信息、個(gè)人聯(lián)系信息等,本文將帶您一起體驗(yàn)jQuery實(shí)現(xiàn)的一個(gè)可以滾動的十分友好的分步注冊向?qū)?,需要的朋友可以參考?/div> 2015-08-08最新評論

