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 google map 两点之间的距离
在Android google map中,有时候会碰到计算两地的距离,下面的辅助类就可以帮助你计算距离: public class DistanceHelper { /** Names for the ...
- SharePoint 2013 Nintex Workflow 工作流帮助(十一)
博客地址 http://blog.csdn.net/foxdave 工作流动作 27. Create item in another site(Libraries and lists分组) 该操作用于 ...
- 理解NSTextContainer
Apple的Doc对这个类的描述是这样的: The NSTextContainer class defines a region where text is laid out. An NSLayout ...
- javascript splice
//arrayObject.splice(index,howmany,element1,.....,elementX)//index 必需.规定从何处添加/删除元素.(0)//howmany 必需.规 ...
- 使用respondsToSelector:来发现对象是否响应消息
发现对象是否响应消息 要发现一个对象是否响应一则消息,请在该对象上调用 respondsToSelector: 方法.应用程序代码通常验证一个对象响应一则消息后,才将消息发送给该对象. if ([it ...
- bootstrap菜单完美解决---原创
由于bootstrap的各方优点,偶的“点金项目细化分包管理平台”决定采用它.但在使用中遇到了一些问题,比如菜单的问题,这个菜单是用的一个JQuery的一个效果,点击后,所点击的链接处的class要加 ...
- Android无限循环轮播广告位Banner
Android无限循环轮播广告位Banner 现在一些app通常会在头部放一个广告位,底部放置一行小圆圈指示器,指示广告位当前的页码,轮播展示一些图片,这些图片来自于网络.这个广告位banner ...
- C#操作指针
如何:递增和递减指针 使用增量和减量运算符 ++ 和 -- 可以将 pointer-type* 类型的指针的位置改变 sizeof (pointer-type). 增量和减量表达式的形式如下: ++p ...
- C++ QUICK REFERENCE
C++ string 用法详解 字符串分割(C++) C++ QUICK REFERENCE Matt Mahoney, mmahoney@cs.fit.edu DECLARATIONS enum ...
- Ubuntu14.04安装配置Open vSwitch
最近在研究学习Open vSwitch,准备在本地Ubuntu14.04机器上安装一下,并基于其创建一些KVM虚拟机,下面就简要记录下在Ubuntu14.04系统上安装Open vSwitch的过程. ...