Deferred API介紹
1. 構造函數
//方式一：
var deferred = $.Deferred();
//方式二：使用new操作符號，一般不這樣做，顯得冗余
var deferred = new $.Deferred();
//方式三：傳入一個函數作為回調函數，這個函數會在構造的Deferred對象返回前執行。該函數被傳入要返回的Deferred對象作為參數
//在函數內部this指向要返回的Deferred對象。
var dfd = new $.Deferred(function(newDeferred){
this.then(function(){console.log("new deferred");});
});
2. deferred.promise() 和 .promise()
這兩個API語法幾乎一樣，但是有著很大的差別。deferred.promise()是Deferred實例的一個方法，他返回一個 Deferred.Promise實例。一個Deferred.Promise對象可以理解為是deferred對象的一個視圖，它只包含 deferred對象的一組方法，包括：done(),then(),fail(),isResolved(), isRejected(), always(),這些方法只能觀察一個deferred的狀態，而無法更改deferred對象的內在狀態。這非常適合于API的封裝。例如一個 deferred對象的持有者可以根據自己的需要控制deferred狀態的狀態（resolved或者rejected），但是可以把這個 deferred對象的Promise對象返回給其它的觀察者，觀察者只能觀察狀態的變化綁定相應的回調函數，但是無法更改deferred對象的內在狀 態，從而起到很好的隔離保護作用。
$(function(){
//
var deferred = $.Deferred();
var promise = deferred.promise();
var doSomething = function(promise) {
promise.done(function(){
alert('deferred resolved.');
});
};
deferred.resolve();
doSomething(promise);
})
deferred.promise()也可以接受一個object參數，此時傳入的object將被賦予Promise的方法，并作為結果返回。
// 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實例的方法！該方法是jQuery實例的方法。該方法用于一組類型的動作（例如動畫）全部完成后返回一個Promise對象，供事件監聽器監聽其狀態并執行相應的處理函數。
該方法接受兩個可選參數：.promise( [type,] [target] )
type：隊列的類型，默認值是fx，fx即jQuery對象的動畫.
targetObject ：要賦予Promise行為的對象，
這兩個參數是可選的。其中第一個參數（我）目前除了fx還沒有找到其他的值類型。因此一般都是用于動畫的監控，在動畫完成后做一些操作。
例子：沒有動畫效果直接返回一個resolved狀態的promise對象
var div = $( "<div />" );
div.promise().done(function( arg1 ) {
// 將會被馬上觸發
alert( this === div && arg1 === div );
});
java中的按值傳遞和按址傳遞例子：在動畫效果全部完成后觸發done()監聽函數
<!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...");
//每個div執行動畫效果
$("div").each(function( i ) {
$( this ).fadeIn().fadeOut( 1000 * (i+1) );
});
//$("div")包含一組div，在所有的div都完成自己的動畫效果后觸發done()函數
$( "div" ).promise().done(function() {
$( "p" ).append( " Finished! " );
});
});
</script>
</body>
</html>
3. deferred.then()
用于給一個deferred對象添加監聽器。該方法接受兩個參數：
deferred.then( doneCallbacks, failCallbacks )
doneCallbacks: 一個函數，或者是一組函數，在deferred被實現時調用
failCallbacks: 一個函數，或者是一組函數，在deferred被拒絕時調用
$.get("test.php").then(
function(){ alert("$.get succeeded"); },
function(){ alert("$.get failed!"); }
);
deferred.then()提供了一種方便的寫法，讓一個deferred在實現或者被拒絕時的監聽函數可以寫在一個api中。
4. deferred.done()
用于添加deferred被實現時的監聽函數。該方法可以接收一到多個參數，每個參數都是一個函數或者一組函數。
例子：
$(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失敗時的監聽函數。該方法可以接收一到多個參數，每個參數都是一個函數或者一組函數。
$(function(){
var dfd = $.Deferred();
var func1 = function() {alert("1");};
var func2 = function() {alert("2");};
dfd.fail(func1, [func1, func2], func2);
//調用reject方法觸發fail事件處理函數
dfd.reject();
})
6. deferred.reject() 和 deferred.rejectWith()
這兩個方法將一個Deferred對象的狀態由未實現置為失敗狀態，將觸發該deferred的fail回調函數。如果deferred的狀態已經是“已實現”，那么將不生效。
reject函數可以接收一個參數，用于傳給deferred的failCallback。而deferred.rejectWith()額外接受一個參數context，作為在fail回調函數中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
墻頭草 閱讀(1332)
評論(0) 編輯 收藏