本文 其实是搬运的 大神 阮一峰老师的文章 ,具体可见:http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html
我只是自己抄了一遍加深自己的理解。
什么是deferred?
简单说,deferred对象就是jQuery的回调函数解决方案。在英语中,defer的意思是”延迟”,所以deferred对象的含义就是”延迟”到未来某个点再执行。
1. ajax请求的传统写法
$.ajax({
url:'',
type:'get',
data:{},
success:function(res){
callBack();
},
error:function(){}
})
success 处理 请求成功,error处理 请求失败,但是无法进行链式调用。
$.ajax( ) 完成后,如果jquery 1.5版本以下,返回的是xhr对象,以上版本返回的是 deferred 对象,是可以进行链式操作的。
2.ajax的链式写法
$.ajax({
url:'',
type:'get',
data:{}
})
.done( function( res ){
alert( '成功'+res )
} )
.fail ( function( res ){
alert( '失败'+res)
} )
使用链式写法之后,代码的可读性也大大提高了
3.制定同一操作的多个回调函数
$.ajax({
url:'',
type:'get',
data:{}
})
.done( function( res ){
alert( '成功'+res )
} )
.fail ( function( res ){
alert( '失败'+res)
} )
.done({
alert('第二个回调函数')
})
回调函数可以添加任意多个,他们按顺序执行
4.为多个操作指定一个回调函数
$.when( $.ajax("test1.html"),$.ajax("test2.html"))
.done()
.fail()
这段代码的意思是,先执行 test1的操作和test2的操作,如果两个都执行成功则 调用done里面的回调函数,如果都没有成功或有一个没有成功则执行fail里面的函数
5.普通操作的回调函数接口(上)
deferred 对象的最大优点,就是把这一套 回调函数接口,从ajax扩展到了所有操作上,也就是说任何一个操作,不管是ajax操作还是本地操作,不管是同步操作还是异步操作都可以用 deferred制定回调函数。
代码实例
var wait= function (){
var tasks = function(){
alert('执行完毕')
};
setTimeout(tasks,3000)
}
我们为他指定回调函数,会怎么做呢?
$.when( wait() )
.done(function(){ alert('成功')})
.fail(function(){ alert('失败')})
但是这样写的话,done方法会立即执行,起不到回调函数的作用,因为$.when 的参数只能是 deferred对象,所以只能对 wait方法改写。
var dtd = $.Deferred() //新建一个 deferred对象
var wait= function( dtd ){
var tasks = function(){
alert('执行完毕');
dtd.resolve() // 改变deferred对象的执行状态
}
setTimeout(tasks ,3000 );
return dtd;
}
现在 wait函数返回的是deferred 对象,这样就可以加上链式操作了
$.when( wait(dtd) )
.done(function(){ alert('成功')})
.fail(function(){ alert('失败')})
wait 函数执行完,就会自动运行done方法指定的操作了。
6. deferred.resolve( )与deferred.reject( )
deferred对象 有三种执行状态,未完成,已完成和待执行
deferred对象 resolved状态 表示执行状态是已完成,会即刻执行done( )操作
deferred对象 rejected 表示执行状态是失败,会即刻执行fail( )操作
如果执行状态是未完成,则会继续等待或者还可以调用 progress( )
所以 有两个方法
deferred.resolve( )
deferred.reject( )
7.deferred对象的 promise( ) 方法