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 相关文章推荐
jquery tools 系列 scrollable学习
Sep 06 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
angularJs中datatable实现代码
Jun 03 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
js刷新页面location.reload()用法详解
Dec 09 Javascript
浅谈JavaScript中this的指向更改
Jul 28 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
西德产收音机
2021/03/01 无线电
php对称加密算法示例
2014/05/07 PHP
PHP 错误处理机制
2015/07/06 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
异步加载script的代码
2011/01/12 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
python逐行读取文件内容的三种方法
2014/01/20 Python
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
中职生自荐信
2013/10/13 职场文书
软件工程师岗位职责
2013/11/16 职场文书
加拿大探亲邀请信
2014/01/28 职场文书
农村婚礼主持词
2014/03/13 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
行政申诉状范文
2015/05/20 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS
正则表达式基础与常用验证表达式
2022/06/16 Javascript