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. ...
随机推荐
- SQL Server 语句整理
1. 创建数据库 create database dbName 2. 删除数据库 drop database dbName 3. 备份sql server --- 创建 备份数据的 device US ...
- 无刷新 checkbox列表的删除
前台 JS : function ModelDelete() { var checkvalues = null; var checValue = $("#dom1").find(& ...
- 《Java7中 下划线的新特性》
//Java7引入了一个新功能:程序员可以在数值中使用下画线,不管是 //整形数值,还是浮点型数值,都可以自由地使用下划线.通过下划线 //分隔,可以更直观的分辨数值中到底有多少位. public c ...
- jQuery中 判断事件
$('button.top').on('mousedown', function() { var $this = $(this); if ($this.hasClass('settop')) { $t ...
- struts2DMI(动态方法调用)
DMI(Dynamic Method Invoke)即动态,是strus2的一个特性,我们知道,在最开始学习strus2时,往往一个action中只有一个excute方法,比如说add,delete, ...
- android avoiding-memory-leaks
android avoiding-memory-leaks Memory Leak是会有多个方面会引起的,比如Drawable, RemoteViews, Receiver, Cursor,Input ...
- String to Integer (atoi) ---- LeetCode 008
Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input cases. ...
- YII2.0上传文件
针对于YII2.0官方手册来说,我稍微修改了一些内容具体的就是把model层里定义的uoload方法在controller方法里合并了 创建模型 namespace app\models; use y ...
- Linux下拷贝目录和删除
cp命令用于复制文件或目录,若同事指定两个以上的文件或目录,切最后一个目的地是一个已存在的目录,则它会把前面指定的所有文件或目录复制到此目录中.若同时指定多个文件或目录,而最后的目的地并非一个已存在的 ...
- java IO流的体系结构图
常用字节流字符流 字节流 InputStream ...