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 相关文章推荐
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
ES6的新特性概览
Mar 10 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 Javascript
js之ajax文件上传
May 13 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若干单维数组遍历方法的比较
2011/09/20 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
php实现的简单检验登陆类
2015/06/18 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
js 表格隔行颜色
2009/12/02 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
python 中字典嵌套列表的方法
2018/07/03 Python
python and or用法详解
2019/06/26 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
python如何求100以内的素数
2020/05/27 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
PHP如何与mysql建立链接
2013/05/05 面试题
介绍一下EJB的体系结构
2012/08/01 面试题
计算机科学与技术应届生求职信
2013/11/07 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
2015年工程部工作总结
2015/04/30 职场文书
加薪申请报告范本
2015/05/15 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
python实现自动化群控的步骤
2021/04/11 Python
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS