详解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 26 Javascript
javascript 原型链维护和继承详解
Nov 26 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
javascript过滤数组重复元素的实现方法
May 03 Javascript
使用vue构建移动应用实战代码
Aug 02 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
react native 文字轮播的实现示例
Jul 27 Javascript
详解angular部署到iis出现404解决方案
Aug 14 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集成百度Ueditor 1.4.3
2014/11/23 PHP
PHP的引用详解
2015/02/22 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
yepnope.js 异步加载资源文件
2011/09/08 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
Python中函数的返回值示例浅析
2019/08/28 Python
python数值基础知识浅析
2019/11/19 Python
Python计算IV值的示例讲解
2020/02/28 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
美国眼镜网:GlassesUSA
2017/09/07 全球购物
.NET初级开发工程师面试题
2014/04/18 面试题
结婚典礼证婚词
2014/01/11 职场文书
银行批评与自我批评
2014/02/10 职场文书
难忘的一天教学反思
2014/04/30 职场文书
竞选宣传委员演讲稿
2014/05/24 职场文书
数学教师求职信范文
2015/03/20 职场文书
行政经理岗位职责
2015/04/15 职场文书
太行山上观后感
2015/06/05 职场文书
2016国培研修心得体会
2016/01/08 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python