Deferred API介紹
1. 構(gòu)造函數(shù)
//方式一：
var deferred = $.Deferred();
//方式二：使用new操作符號，一般不這樣做，顯得冗余
var deferred = new $.Deferred();
//方式三：傳入一個(gè)函數(shù)作為回調(diào)函數(shù)，這個(gè)函數(shù)會(huì)在構(gòu)造的Deferred對象返回前執(zhí)行。該函數(shù)被傳入要返回的Deferred對象作為參數(shù)
//在函數(shù)內(nèi)部this指向要返回的Deferred對象。
var dfd = new $.Deferred(function(newDeferred){
this.then(function(){console.log("new deferred");});
});
2. deferred.promise() 和 .promise()
這兩個(gè)API語法幾乎一樣，但是有著很大的差別。deferred.promise()是Deferred實(shí)例的一個(gè)方法，他返回一個(gè) Deferred.Promise實(shí)例。一個(gè)Deferred.Promise對象可以理解為是deferred對象的一個(gè)視圖，它只包含 deferred對象的一組方法，包括：done(),then(),fail(),isResolved(), isRejected(), always(),這些方法只能觀察一個(gè)deferred的狀態(tài)，而無法更改deferred對象的內(nèi)在狀態(tài)。這非常適合于API的封裝。例如一個(gè) deferred對象的持有者可以根據(jù)自己的需要控制deferred狀態(tài)的狀態(tài)（resolved或者rejected），但是可以把這個(gè) deferred對象的Promise對象返回給其它的觀察者，觀察者只能觀察狀態(tài)的變化綁定相應(yīng)的回調(diào)函數(shù)，但是無法更改deferred對象的內(nèi)在狀 態(tài)，從而起到很好的隔離保護(hù)作用。
$(function(){
//
var deferred = $.Deferred();
var promise = deferred.promise();
var doSomething = function(promise) {
promise.done(function(){
alert('deferred resolved.');
});
};
deferred.resolve();
doSomething(promise);
})
deferred.promise()也可以接受一個(gè)object參數(shù)，此時(shí)傳入的object將被賦予Promise的方法，并作為結(jié)果返回。
// Existing object
var obj = {
hello: function( name ) {
alert( "Hello " + name );
}
},
// Create a Deferred
defer = $.Deferred();
// Set object as a promise
defer.promise( obj );
// Resolve the deferred
defer.resolve( "John" );
// Use the object as a Promise
obj.done(function( name ) {
this.hello( name ); // will alert "Hello John"
}).hello( "Karl" ); // will alert "Hello Karl"
接下來介紹.promise()方法。
首先這不是Deferred實(shí)例的方法！該方法是jQuery實(shí)例的方法。該方法用于一組類型的動(dòng)作（例如動(dòng)畫）全部完成后返回一個(gè)Promise對象，供事件監(jiān)聽器監(jiān)聽其狀態(tài)并執(zhí)行相應(yīng)的處理函數(shù)。
該方法接受兩個(gè)可選參數(shù)：.promise( [type,] [target] )
type：隊(duì)列的類型，默認(rèn)值是fx，fx即jQuery對象的動(dòng)畫.
targetObject ：要賦予Promise行為的對象，
這兩個(gè)參數(shù)是可選的。其中第一個(gè)參數(shù)（我）目前除了fx還沒有找到其他的值類型。因此一般都是用于動(dòng)畫的監(jiān)控，在動(dòng)畫完成后做一些操作。
例子：沒有動(dòng)畫效果直接返回一個(gè)resolved狀態(tài)的promise對象
var div = $( "<div />" );
div.promise().done(function( arg1 ) {
// 將會(huì)被馬上觸發(fā)
alert( this === div && arg1 === div );
});
java中的按值傳遞和按址傳遞例子：在動(dòng)畫效果全部完成后觸發(fā)done()監(jiān)聽函數(shù)
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 50px; width: 50px;
float: left; margin-right: 10px;
display: none; background-color: #090;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Go</button>
<p>Ready...</p>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
$("button").bind( "click", function() {
$("p").append( "Started...");
//每個(gè)div執(zhí)行動(dòng)畫效果
$("div").each(function( i ) {
$( this ).fadeIn().fadeOut( 1000 * (i+1) );
});
//$("div")包含一組div，在所有的div都完成自己的動(dòng)畫效果后觸發(fā)done()函數(shù)
$( "div" ).promise().done(function() {
$( "p" ).append( " Finished! " );
});
});
</script>
</body>
</html>
3. deferred.then()
用于給一個(gè)deferred對象添加監(jiān)聽器。該方法接受兩個(gè)參數(shù)：
deferred.then( doneCallbacks, failCallbacks )
doneCallbacks: 一個(gè)函數(shù)，或者是一組函數(shù)，在deferred被實(shí)現(xiàn)時(shí)調(diào)用
failCallbacks: 一個(gè)函數(shù)，或者是一組函數(shù)，在deferred被拒絕時(shí)調(diào)用
$.get("test.php").then(
function(){ alert("$.get succeeded"); },
function(){ alert("$.get failed!"); }
);
deferred.then()提供了一種方便的寫法，讓一個(gè)deferred在實(shí)現(xiàn)或者被拒絕時(shí)的監(jiān)聽函數(shù)可以寫在一個(gè)api中。
4. deferred.done()
用于添加deferred被實(shí)現(xiàn)時(shí)的監(jiān)聽函數(shù)。該方法可以接收一到多個(gè)參數(shù)，每個(gè)參數(shù)都是一個(gè)函數(shù)或者一組函數(shù)。
例子：
$(function(){
var dfd = $.Deferred();
var func1 = function() {alert("1");};
var func2 = function() {alert("2");};
dfd.done(func1, [func1, func2], func2);
dfd.resolve();
})
5. deferred.fail()
用于添加deferred失敗時(shí)的監(jiān)聽函數(shù)。該方法可以接收一到多個(gè)參數(shù)，每個(gè)參數(shù)都是一個(gè)函數(shù)或者一組函數(shù)。
$(function(){
var dfd = $.Deferred();
var func1 = function() {alert("1");};
var func2 = function() {alert("2");};
dfd.fail(func1, [func1, func2], func2);
//調(diào)用reject方法觸發(fā)fail事件處理函數(shù)
dfd.reject();
})
6. deferred.reject() 和 deferred.rejectWith()
這兩個(gè)方法將一個(gè)Deferred對象的狀態(tài)由未實(shí)現(xiàn)置為失敗狀態(tài)，將觸發(fā)該deferred的fail回調(diào)函數(shù)。如果deferred的狀態(tài)已經(jīng)是“已實(shí)現(xiàn)”，那么將不生效。
reject函數(shù)可以接收一個(gè)參數(shù)，用于傳給deferred的failCallback。而deferred.rejectWith()額外接受一個(gè)參數(shù)context，作為在fail回調(diào)函數(shù)中this的值。
例子：deferred.reject([args])
見5中的例子。
例子：deferred.rejectWith()，指定context
$(function(){
var dfd = $.Deferred();
dfd.fail(function(cause){
console.log(cause);
console.log(this.name);
});
dfd.rejectWith({name: 'demo'}, ["invalid input!"]);
})
posted on 2011-07-19 09:49
墻頭草 閱讀(1331)
評論(0) 編輯 收藏