详解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 相关文章推荐
jQuery页面滚动浮动层智能定位实例代码
Aug 23 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
Vue.js搭建移动端购物车界面
Jun 28 Javascript
微信小程序block的使用教程
Apr 01 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
javascript中call()、apply()的区别
Mar 21 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 Javascript
基于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
CentOS安装php v8js教程
2015/02/26 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
PHP5.3新特性小结
2016/02/14 PHP
PDO::errorInfo讲解
2019/01/28 PHP
jquery 注意事项与常用语法小结
2010/06/07 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
javascript的this关键字详解
2019/05/20 Javascript
Python正则表达式完全指南
2017/05/25 Python
解决已经安装requests,却依然提示No module named requests问题
2018/05/18 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
盛大二次面试题
2016/11/18 面试题
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
中学老师的自我评价
2013/11/07 职场文书
应聘面试自我评价
2014/01/24 职场文书
公关活动策划方案
2014/05/25 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
python元组打包和解包过程详解
2021/08/02 Python
PHP正则表达式之RCEService回溯
2022/04/11 PHP
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技