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
墙头草 阅读(1323)
评论(0) 编辑 收藏