jQuery中的Deferred和promise 的区别


Posted in Javascript onApril 03, 2016

Deferred和Promise之间有什么区别呢?

promise

一个promise就是一个由 异步函数返回的对象 。当你想要自己编写一个这样的函数时你需要使用一个deferred。

var promise = $.ajax({
url: "/myServerScript"
});
promise.done(mySuccessFunction); 
promise.fail(myErrorFunction); 
var promise = $.ajax({
url: "/myServerScript"
}); 
promise.then(mySuccessFunction,myErrorFunction);

使用Promises的好处有以下几点:

你可以多次调用done()和fail()函数,并使用不同的回调函数。或许你的一个回调函数用来停止动画,一个用来发起一个新的AJAX请求,一个用来将接受到的数据展示给用户。

var promise = $.ajax({ url: "/myServerScript" });
promise.done(myStopAnimationFunction); promise.done(myOtherAjaxFunction); 
promise.done(myShowInfoFunction); promise.fail(myErrorFunction);

即使在AJAX调用完成之后,你依然可以调用done()和fail()函数,并且回调函数可以立即执行。不同的状态之间并不会发生变量混乱。当一个AJAX调用结束时,它保持了一个成功状态或者失败状态,这个状态不会发生改变。

你可以合并promises。有时你需要同时进行两个AJAX请求并且想要在两个AJAX请求都成功时调用一个函数。为了完成这个任务,你需要使用一个新的$.when()函数:

var promise1 = $.ajax("/myServerScript1"); 
var promise2 = $.ajax("/myServerScript2");
$.when(promise1, promise2).done(function(xhrObject1, xhrObject2) { // 处理两个XHR对象 });

deferred

简单说,deferred对象就是jQuery的回调函数解决方案。在英语中,defer的意思是”延迟”,所以deferred对象的含义就是”延迟”到未来某个点再执行。

一个 deferred对象 能做的和一个promise对象差不多,但是它有两个函数来触发 done()和fail()函数 。

一个deferred对象拥有一个resolve()函数来处理一个成功的结果并执行与done()相关的函数。reject()函数则用来处理失败的结果并执行与fail()相关的函数。

你可以给resolve()和reject()函数都提供参数,然后它们都将传递给与done()和fail()相关的回调函数。

总结

jQuery 的ajax 就是返回一个promise 对象,里面含有done(), fail()方法; deferred 就是实现返回这个promise 对象的过程。

Javascript 相关文章推荐
JS setCapture 区域外事件捕捉
Mar 18 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
JS验证身份证有效性示例
Oct 11 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
移动端js图片查看器
Nov 17 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
JS实现的抛物线运动效果示例
Jan 30 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
highCharts提示框中显示当前时间的方法
Jan 18 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 #Javascript
jQuery qrcode生成二维码的方法
Apr 03 #Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 #Javascript
AngularJs 60分钟入门基础教程
Apr 03 #Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 #Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 #Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 #Javascript
You might like
用 php 编写的日历
2006/10/09 PHP
PHP编码规范-php coding standard
2007/03/16 PHP
解析php中获取url与物理路径的总结
2013/06/21 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
javascript读取RSS数据
2007/01/20 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
详解Python之unittest单元测试代码
2018/01/24 Python
python3 读写文件换行符的方法
2018/04/09 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
如何选择使用结构还是类
2014/05/30 面试题
银行财务部实习生的自我鉴定
2013/11/27 职场文书
工厂仓管员岗位职责
2014/01/01 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
授权委托书
2015/01/28 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫
vue修饰符.capture和.self的区别
2022/04/22 Vue.js