详解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 相关文章推荐
显示js对象所有属性和方法的函数
Oct 16 Javascript
JavaScript mapreduce工作原理简析
Nov 25 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
JavaScript 中的 this 简单规则
Sep 19 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
解决百度Echarts图表坐标轴越界的方法
Oct 17 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 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
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
详解Python 协程的详细用法使用和例子
2018/06/15 Python
Python 如何提高元组的可读性
2019/08/26 Python
Python自省及反射原理实例详解
2020/07/06 Python
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
学生励志演讲稿
2014/01/06 职场文书
如何写自我鉴定
2014/03/19 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
微信小程序调用python模型
2022/04/21 Python