详解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 相关文章推荐
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
JavaScript实现通讯录功能
Dec 27 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 PDO操作MySQL基础教程
2017/06/05 PHP
Javascript 圆角div的实现代码
2009/10/15 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
Python 随机生成中文验证码的实例代码
2013/03/20 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
浅析Python中的join()方法的使用
2015/05/19 Python
Python实现随机选择元素功能
2017/09/14 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
tensorflow 实现数据类型转换
2020/02/17 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
python try...finally...的实现方法
2020/11/25 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
澳大利亚家具商店:Freedom
2020/12/17 全球购物
网络工程师专家职业发展路线
2014/02/14 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
2014年党总支工作总结
2014/12/18 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript