jQuery中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对象的使用(一)的更多相关文章
- jQuery中deferred对象的使用(二)
接上一回的内容,漏了一个always()方法,参数也是回调函数,与done和fail不同的是,无论任何情况都执行always方法中的回调. deferred对象的使用(二) deferred对象不光可 ...
- jQuery中异步操作对象Deferred
以下介绍一下jQuery中Deferred对象的使用: 1. 通过$.Deferred生成一个deferredObj对象; 2. deferredObj.done()指定操作成功时的回调函数; 3. ...
- jQuery的deferred对象学习
#copy { background-color: lightgreen; padding: 15px; margin: 10px } 一.deferred对象简介 deferred对象是jquery ...
- jQuery的deferred对象
应用场景:处理异步任务 看到一篇阮一峰老师的博客挺好的讲的就是jQuery的deferred对象.坦诚讲之前没有怎么用过这个东东呢. 摘其中几点记录下 (1) $.Deferred() 生成一个def ...
- jQuery的deferred对象详解(一)
最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面 ...
- [转] jQuery的deferred对象详解
jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. ...
- jQuery的deferred对象详解(转)
jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. ...
- jQuery的deferred对象详解 jquery回调函数
http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html jQuery的 ...
- jQuery的deferred对象详解(转载)
jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本.(由于无法转载,复制原文 .原文链接——原作者:阮一峰) 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5. ...
随机推荐
- Python中的url编码问题
>>> import urllib >>> a = "PythonTab中文网" >>> a 'PythonTab\xe4\x ...
- golang获取packed struct的大小
网络协议里面,很可能遇到自定义的封包,对应到c里面的是 typedef struct _PackageHeader { int headerLen; int timeStamp; short cmd ...
- FC 协议
FC 协议简介 开发于1988年,最早是用来提高硬盘协议的传输带宽,侧重于数据的快速.高效.可靠传输.到上世纪90年代末, FC SAN 开始得到大规模的广泛应用. FC 协议其实并不能翻译成光纤协议 ...
- Java堆外内存之一:堆外内存场景介绍(对象池VS堆外内存)
最近经常有人问我在Java中使用堆外(off heap)内存的好处与用途何在.我想其他面临几样选择的人应该也会对这个答案感兴趣吧. 堆外内存其实并无特别之处.线程栈,应用程序代码,NIO缓存用的都是堆 ...
- 1006 Sign In and Sign Out (25)(25 分)思路:普通的时间比较题。。。
1006 Sign In and Sign Out (25)(25 分) At the beginning of every day, the first person who signs in th ...
- Servlet的复习
Servlet概述 在JavaWeb阶段,使用Servlet是很经常的是事情,Servlet作为MVC中控制器(C)的存在,是不可缺少的一部分.当然Servlet作为JavaWeb的三大组件之一(其他 ...
- JAVA中return的用法
public class TestReturn { public static void main(String args[]) { TestReturn t = new TestReturn(); ...
- 关于i++的解释
根据 JavaScript Language Specification 的定义, 表达式 A=B的执行步骤,简单地说,就是:1. 对等号左边的表达式 A 进行计算,算出最终的结果,必须是参照或变量: ...
- 第二章:Android Studio概述(二)[学习Android Studio汉化教程]
The Main Menu Bar 主菜单栏 主菜单栏位于Android Studio的最上面,你几乎可以利用主菜单和其子菜单来执行任何操作.不像Android Studio中其他的一些菜单,主菜单 ...
- linux命令日志处理
刘超 2018/10/8 10:32:43 zcat bi_www_activity_2018100*.log.gz |grep --color '多方电话h5_' | awk -F'|' '{pri ...