jQuery的deferred对象使用详解


Posted in Javascript onSeptember 25, 2016

之前看别人的demo,发现在延迟对象被resolve时要执行的代码,有时会写在deferred.then方法里执行,有时会写在deferred.done方法里执行。

这让对延迟对象一知半解的我非常困惑,今天抽时间研究了一下下,发现:在某种环境下,两个方法的确能实现同样的效果。
这种特定的环境是怎样呢?

先看一下deferred.done的用法:

// 创建deferred对象
var dtd = $.Deferred();
 
// 解决deferred对象
dtd.resolve('finish');
// 调用done方法
dtd.done(doneCallback [, doneCallback])
// 当deferred对象被 resolve 时,执行doneCallback函数
// 参数可为一个函数、多个函数或函数数组
// 返回原来的deferred或promise对象

再看下deferred.then的用法和特性:

// 创建deferred对象
var dtd = $.Deferred();
 
// 解决deferred对象
dtd.resolve('finish');
 
// 调用then方法
deferred.then(doneFilter [, failFilter] [, progressFilter])
// then方法特性:
// 当deferred对象被resolve时,执行doneFilter函数
// 当deferred对象被reject时,执行failFilter函数
// 当dederred对象被progress时,执行progressFilter函数
// 返回值:1,返回deferred的promise对象,可修改promise传递的值( 原来resolve,reject 的返回值为a,将a修改为b,返回b,该promise的done或fail收到的返回值变为b );
// 返回值:2,在then方法内创建新的deferred对象并返回其promise
// 返回的promise对象可以链接其他的延迟对象,如done,fail,then等
// 多个then方法时,异步执行( one by one )
// 该方法会过滤掉deferred修改状态的方法,返回值deferred对象的promise 

根据以上两个方法的特性,发现:

deferred.thendeferred.done方法都可以直接收一个参数函数,且第一个参数函数都是在deferred对象在resolve时被调用。

虽说then方法可改变返回值,但在不考虑返回值且只有一个参数函数的前提下,两个方法的确可以实现一样的效果。

相比之下,done方法更纯粹吧,then方法会更复杂一些,但不能完全替代done方法,使用then方法的话,还是小心些的好。

附Deferred对象的其它方法:

// 创建延迟对象 <br>var dtd = $.Deferred();

var state = dtd.state();
// 返回deferred对象当前状态,pending / resolved / rejected
// 不接受任何参数

deferred.always( alwaysCallback [, alwaysCallback] );
// 当deferred对象被解决或拒绝时,都执行此方法
// 参数可以是一个函数,或是一个函数数组

dtd.promise( [obj] );
// 目的: 防止其他代码干涉其内部进度和状态
// 返回新的promise对象,包含可以执行的方法( done, fail, then, always, progress, state, promise ),
// 不包含修改Deferred状态的方法( resolve, reject, notify, resolveWith, rejectWith, nodifyWith )
// 需返回deferred对象时,建议返回deferred.promise()

dtd.resolve( [args] )
// 解决deferred对象,调用所有doneCallback函数
// doneCallback可通过then方法中第一个参数设置,也可通过dtd.done( doneCallback )添加
// 参数将传递给doneCallback。参数可选
// 只有deferred对象的创建者才可以调用的方法
// doneCallback中this为deferred或promise对象
// doneCallback只接收一个参数

dtd.resolveWith( context [,args] )
// 解决deferred对象,调用所有doneCallback函数
// 参数:第一个参数为上下文即this对象,doneCallback的this将被修改;第二个参数为数组
// doneCallback中this为调用resolveWith方法的上下文
// doneCallback接收参数个数为该方法第二个参数数组的长度
// 与resolve方法的区别在于,将改变doneCallback函数的this指向

dtd.reject( [args] )
// 拒绝deferred对象,调用所有failCallback函数
// failCallback可通过then方法中第二个参数设置,也可通过dtd.fail( failCallback )添加
// 参数将传递给failCallback。参数可选
// 只有deferred对象的创建者才可以调用的方法
// failCallback中this为deferred或promise对象
// failCallback只接收一个参数

dtd.rejectWith(context, [args] )
// 解决deferred对象,调用所有failCallback函数
// 参数:第一个参数为上下文即this对象,failCallback的this将被修改;第二个参数为数组
// failCallback中this为调用rejectWith方法的上下文
// failCallback接收参数个数为该方法第二个参数数组的长度
// 与resolve方法的区别在于,将改变failCallback函数的this指向

dtd.notify( [args] )
// deferred进行处理时,调用所有的progressCallback函数
// progressCallback可通过then方法中的第3个参数设置,也可以通过deferred.progress( progressCallback )添加
// 通常此方法只能被deferred对象的创建者调用,可通过deferred.promise或then过滤此方法
// 参数可不写。若写有参数,建议为字符串或可返回字符串的函数
// 当deferred进入 resolved 或rejected状态后,再调用notify方法,progressCallback将不再被执行

dtd.notifyWith(context, [args] )
// deferred进行处理时, 调用所有progressCallback函数
// 参数:第一个参数为上下文即this对象,progressCallback的this将被修改;第二个参数为数组
// progressCallback中this为调用rejectWith方法的上下文
// progressCallback接收参数个数为该方法第二个参数数组的长度
// 与resolve方法的区别在于,将改变progressCallback函数的this指向
// 当deferred进入 resolved 或rejected状态后,再调用notifyWith方法,progressCallback将不再被执行
Javascript 相关文章推荐
用JavaScript实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
js限制输入框只能输入数字(onkeyup触发)
Sep 28 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 #Javascript
D3.js实现直方图的方法详解
Sep 25 #Javascript
关于JS中二维数组的声明方法
Sep 24 #Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 #Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 #Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 #Javascript
浅谈js常用内置方法和对象
Sep 24 #Javascript
You might like
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
javascript生成json数据简单示例分享
2014/02/14 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
Python中正则表达式的用法实例汇总
2014/08/18 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
如何写python的配置文件
2020/06/07 Python
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
附答案的Java面试题
2012/11/19 面试题
什么是Web Service?
2012/07/25 面试题
教师实习期自我鉴定
2013/10/06 职场文书
物流专业毕业生推荐信范文
2013/11/18 职场文书
大学生自我鉴定范文
2013/12/28 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
运动会横幅标语
2014/06/17 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
Python 中 Shutil 模块详情
2021/11/11 Python
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python