详解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 11 Javascript
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
JsRender for object语法简介
Oct 31 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
Nov 06 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
风格模板初级不完全修改教程
2006/10/09 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
jquery $.ajax入门应用二
2008/11/19 Javascript
jQuery图片预加载 等比缩放实现代码
2011/10/04 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
Python实现网站文件的全备份和差异备份
2014/11/30 Python
简单介绍Ruby中的CGI编程
2015/04/10 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
python实现二叉树的遍历
2017/12/11 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
工作的心得体会
2013/12/31 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
运动会横幅标语
2014/06/17 职场文书
审计班子对照检查材料
2014/08/27 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
实习生辞职信范文
2015/03/02 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python