jQuery之Deferred对象的使用
详见:http://www.imooc.com/code/8907
JavaScript的执行流程是分为"同步"与"异步"
传统的异步操作会在操作完成之后,使用回调函数传回结果,而回调函数中则包含了后续的工作。这也是造成异步编程困难的主要原因:
我们一直习惯于“线性”地编写代码逻辑,但是大量异步操作所带来的回调函数,会把我们的算法分解地支离破碎。
嵌套式回调
动画为例,下一个动画要等上一个执行完毕才可以继续,流程就会写到回调里面
//执行多个动画
$('ele1').animate({
opacity: '.5'
}, 4000, function() {
$('ele2').animate({
width: '100px'
}, 2000, function() {
$('ele3').animate({
height: '0'
}, 2000);
});
});
上面的代码编程逻辑也是正确的,但是针对这样的异步嵌套的回调逻辑,当我们的嵌套越多,代码结构层级会变得越来越深。首先是阅读上会变得困难,其次是强耦合,接口变得不好扩展。我们需要一种模式来解决这种问题,这就是Promises所要做的事情。
为了让前端们从回调的地狱中回到天堂, jQuery 也引入了 Promise 的概念。 Promise 是一种令代码异步行为更加优雅的抽象,有了它,我们就可以像写同步代码一样去写异步代码。这个东东看起来很复杂,实际上我们只要抓住核心的使用就可以了
观察右边代码:
通过$.Deferred处理过的代码,很明显没有了回调的嵌套,虽然代码量看起来多了点,但是实际上,每一个代码执行部分都被封装了起来,只留了Deferred的接口处理了,等于是我们把执行的流程控制交给了Deferred,这样的好处就是我们在写嵌套函数的时候,可以用deferred提供的管道风格编写同步代码了
dtd.then(function() {
//操作1
}).then(function() {
//操作2
}).then(function() {
//操作3
})
这里要了解3个步骤
var dtd = $.Deferred(); //创建
dtd.resolve(); //成功
dtd.then() //执行回调
jQuery之Deferred对象的使用的更多相关文章
- jQuery的deferred对象详解
jQuery的deferred对象详解请猛击下面的链接 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_ ...
- jQuery的deferred对象学习
#copy { background-color: lightgreen; padding: 15px; margin: 10px } 一.deferred对象简介 deferred对象是jquery ...
- jQuery的deferred对象详解(转载)
本文转载自: jQuery的deferred对象详解(转载)
- jQuery的deferred对象
应用场景:处理异步任务 看到一篇阮一峰老师的博客挺好的讲的就是jQuery的deferred对象.坦诚讲之前没有怎么用过这个东东呢. 摘其中几点记录下 (1) $.Deferred() 生成一个def ...
- jQuery的deferred对象详解(一)
最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面 ...
- jQuery的deferred对象解析
参考: jQuery的deferred对象详解:http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_defe ...
- [转] 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. ...
随机推荐
- Android ContentProvider的实现
当Android中的应用需要访问其他应用的数据时,用ContentProvider可以很好的解决这个问题.今天介绍一下ContentProvider的用法. 首先开发ContentProvider有两 ...
- IE和火狐 差异
1.JavaScript中 1)IE和FireFox中childNodes的差别: <head> <script type="text/javascript"&g ...
- PDF2SWF转换只有一页的PDF文档,在FlexPaper不显示解决方法
问题:PDF2SWF转换只有一页的PDF文档,在FlexPaper不显示! FlexPaper 与 PDF2SWF 结合是解决在线阅读PDF格式文件的问题的,多页的PDF文件转换可以正常显示,只有一页 ...
- 项目管理软件---redmine安装配置
redmine是一个开源的项目管理软件,其主页是:http://www.redmine.org redmine是基于Ruby on Rails框架的,跨平台和跨数据库. 安装过程 ========== ...
- vSphere Client上传镜像
1. 使用vSphere Client连接到VMware ESXI 2. 打开右侧 [摘要] 选项卡 3. 在 [资源] 中选择存储器中的存储,右键 [浏览数据库存储] 4. 选择工具栏 [创建新文件 ...
- iOS定时器NSTimer的使用方法
1.初始化 + (NSTimer *)timerWithTimeInterval:(NSTimeInterval)ti target:(id)aTarget selector:(SEL)aSelect ...
- objectARX判断当前坐标系
判断当前坐标系是WCS还是UCS 使用系统变量 WORLDUCS 请参见 用户坐标系 (UCS) 概述 (只读) 类型: 整数 保存位置: 未保存 初始值: 1 指示 UCS 是否与 WCS 相同 ...
- win10下安装centOS 7 U盘
前段时间我把朋友帮忙装的ubuntu15.10给玩坏了=.=虽然后来自己在另一台电脑上成功装了ubuntu16.04和win7双系统,但是...这台电脑也要装个别的系统才比较..不空.所以决定装个ce ...
- Sql Server REPLACE函数的使用;SQL中 patindex函数的用法
Sql Server REPLACE函数的使用 REPLACE用第三个表达式替换第一个字符串表达式中出现的所有第二个给定字符串表达式. 语法REPLACE ( ''string_replace1'' ...
- 配置PhoneGap 到iOS
下载 phonegap安装phonegap之前需要NodeJS环境,下载NodeJS并安装.安装环境的目的是为了使用phonegap命令行. 3. 安装phonegap使用命令 $phonega ...