详解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 相关文章推荐
prototype 1.5 & scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
Javascript 圆角div的实现代码
Oct 15 Javascript
JQuery优缺点分析说明
Apr 10 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 Javascript
实例讲解vue源码架构
Jan 24 Javascript
详解jQuery如何实现模糊搜索
May 10 jQuery
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 Javascript
原生js实现移动小球(碰撞检测)
Dec 17 Javascript
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
基于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格式化日期和时间格式化示例分享
2014/02/24 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
jQuery对val和atrr("value")赋值的区别介绍
2014/09/26 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
python通过floor函数舍弃小数位的方法
2015/03/17 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
Python分割指定页数的pdf文件方法
2018/10/26 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
python与js主要区别点总结
2020/09/13 Python
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
幼儿如何来做好自我评价
2013/11/05 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
爱情保证书
2015/01/17 职场文书
党员转正介绍人意见
2015/06/03 职场文书
遗失证明范文
2015/06/19 职场文书
浅谈Python数学建模之线性规划
2021/06/23 Python
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript