jQuery中deferred对象使用方法详解


Posted in Javascript onJuly 14, 2016

在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');
});

接者学习,漏了一个always()方法,参数也是回调函数,与done和fail不同的是,无论任何情况都执行always方法中的回调。
deferred对象不光可以用在jquery的ajax方法中,他提供了一系列的接口,使它的通用型大大提高。
比如有这样一个耗时比较久的方法

function a(){
 function b(){
 alert('start');
 } 
 setTimeout(b, 3000); 
}

如果要在这个方法之后执行某个回调,就不能用$.when()了,因为当$.when()的参数不为deferred对象是会直接调用done或者always中的回调函数。
这个时候就要使用deferred对象的其他方法了,还是上面的方法,做一些改写 

function a(){
 var def = $.Deferred(); // 创建deferred对象 
 function b(){
 alert('start');
 def.resolve(); // 改变deferred对象的状态
 } 
 setTimeout(b, 3000); 
 return def;
}

$.when(a()).done(function(){
 alert("It's callback");
});

分析一下:
 1). $.Deferred()方法会创建一个deferred对象
 2). def.resolve()会改变deferred对象的状态,deferred对象有三种状态,未完成,成功,失败。
 它有resolve()和reject()两个方法,resolve方法可以把对象状态改为成功,reject方法可以把状态改为失败。
 又有以上的写法会出现问题,返回的deferred对象可以被外部改变状态,所以还提供了一个promise()方法,这个方法会在deferred对象的基础上返回一个新的deferred对象,不同的是,返回的对象只存在可被观察到状态,而不具备可改变其状态的方法,类似返回了一个只读的deferred对象。
 所以同样的例子可以改写成这样 

function a(){
 var def = $.Deferred(); // 创建deferred对象 
 function b(){
 alert('start');
 def.resolve(); // 改变deferred对象的状态
 } 
 setTimeout(b, 3000); 
 return def.promise();
}

$.when(a().reject()).done(function(){ // reject()方法无效
 alert("It's callback");
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript代码复用模式实例分析
Dec 02 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 Javascript
jsonp跨域获取百度联想词的方法分析
May 13 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
vue总线机制(bus)知识点详解
May 10 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 #Javascript
基于jQuery的ajax方法封装
Jul 14 #Javascript
由浅入深剖析Angular表单验证
Jul 14 #Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 #Javascript
js css+html实现简单的日历
Jul 14 #Javascript
javascript运算符——位运算符全面介绍
Jul 14 #Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 #Javascript
You might like
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
更优雅的事件触发兼容
2011/10/24 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
jQuery原生的动画效果
2015/07/10 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
python解析yaml文件过程详解
2019/08/30 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
美国紧身牛仔裤品牌:NYDJ
2017/05/24 全球购物
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
优秀生推荐信范文
2013/11/28 职场文书
任命书范本大全
2014/06/06 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang