详解jQuery中的deferred对象的使用(一)


Posted in Javascript onMay 27, 2016

 deferred对象是jQuery对Promises接口的实现。它是非同步操作的通用接口,可以被看作是一个等待完成的任务,开发者通过一些通过的接口对其进行设置。事实上,它扮演代理人(proxy)的角色,将那些非同步操作包装成具有某些统一特性的对象,典型例子就是Ajax操作、网页动画、web worker等等。

jQuery的所有Ajax操作函数,默认返回的就是一个deferred对象。

在jquery1.5之后的版本中,加入了一个deferred对象,也就是延迟对象,用来处理未来某一时间点发生的回调函数。同时,还改写了ajax方法,现在的ajax方法返回的是一个deferred对象。

那就来看看deferred对象的用法。

1.ajax的链式回调

// ajax方法返回的是一个deferred对象,可以直接使用链式写法
$.ajax('test.json').done(function(resp){
// done 相当于success回调,其中默认的参数为success回调的参数
alert('success');
}).fail(function(){
// fail 相当于error回调
alert('error');
});

还可以同时写多个回调,会按照顺序依次执行

$.ajax('test.json').done(function(resp){
// done 相当于success回调,其中默认的参数为success回调的参数
alert('success');
}).done(function(){
// do something...
}).done(function(){
// do something...
});

deferred对象还有一个then方法,其实它是一个整合done和fail的方法,它接受一到两个参数,如果有两个参数,那么第一个就是done方法的回调函数,第二个是fail方法的回调函数。如果只有一个参数,那就是done方法的回调函数。

var success = function(){
alert('success'); 
};
var error = function(){
alert('error');
};
// 两个参数
$.ajax('test.json').then(success, error);
// 一个参数
$.ajax('test.json').then(success);

jQuery还提供了一个$.when(deferreds)的方法来执行一个或多个延迟对象的回调函数,当它的参数是延迟对象时,它会在所有延迟对象代表的异步执行完后再执行相应的回调函数

$.when($.ajax('test.json'), $.ajax('demo.json')) .done(function(){
alert('success'); 
}).fail(function(){
alert('error');
});

很好理解,只有当所有异步都成功时,才会执行done方法中的回调,否则会执行fail方法中的回调,同样好理解的是的done方法中回调函数的默认参数数量则和when方法参数数量相同。

而如果when方法中传入的只是普通对象,不是deferred对象时,会立即执行done方法中的回调,回调函数的默认参数为传入when方法的对象本身。

// 当传入when方法的参数只是普通对象时
$.when({test: 'test'}).done(function(resp){
console.log(resp.test); // 'test' 
}).fail(function(){
// 由于传入的对象不是deferred对象,那么就不会调用fail中的回调了 
})

当你需要两个甚至更多的异步结束后才调用回调函数,同时这些异步ajax可能还需要修改传输方式type或者传数据data时,代码就显得很乱,可读性很差。

所以就可以对ajax进行再次封装,提高代码可读性

var ajax = function(url, type, param){
return $.ajax({
url: url,
type: type,
data: param || {} 
}); 
};
ajax('test.json').done(function(resp){
alert('success');
}).fail(function(){
alert('error');
});

以上所述是小编给大家介绍的jQuery中的deferred对象的使用(一)的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
js编写的treeview使用方法
Nov 11 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
详解vue-cli中使用rem,vue自适应
May 06 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 Javascript
详解 javascript对象创建模式
Oct 30 Javascript
vue中如何自定义右键菜单详解
Dec 08 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
基于JS实现密码框(password)中显示文字提示功能代码
May 27 #Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 #Javascript
Node.js的npm包管理器基础使用教程
May 26 #Javascript
JavaScript中的各种操作符使用总结
May 26 #Javascript
浅析JavaScript中的对象类型Object
May 26 #Javascript
简单总结JavaScript中的String字符串类型
May 26 #Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 #Javascript
You might like
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
javascript读取xml
2006/11/04 Javascript
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
能说明你的Javascript技术很烂的五个原因分析
2011/10/28 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
Vue项目中配置pug解析支持
2019/05/10 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python 显示数组全部元素的方法
2018/04/19 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
会计与审计毕业生自荐信范文
2013/12/30 职场文书
学雷锋演讲稿
2014/03/04 职场文书
四群教育工作实施方案
2014/03/26 职场文书
家长会标语
2014/06/24 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
企业员工辞职信范文
2015/05/12 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
MySQL系列之二 多实例配置
2021/07/02 MySQL
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫