1 引子
上一篇博文中介绍的Deferred,它表示一个延迟对象。但是很多时候,我们需要在多个延迟对象(异步代码)都执行完后再去执行另一段代码,这种情况下,使用Deferred就行不通了,就需要使用这里的$.when。
var wait1=$.Deferred(),
wait2=$.Deferred();
wait1.done(function () {
console.log('wait1-success');
});
wait2.done(function () {
console.log('wait2-success');
});
setTimeout(function () {
wait1.resolve();
},1000);
setTimeout(function () {
wait2.resolve();
},2000);
$.when(wait1,wait2)
.done(function () {
console.log('both wait1 and wait2 are success')
});
var wait1=$.Deferred(),
wait2=$.Deferred();
wait1.fail(function () {
console.log('wait1-fail');
});
wait2.fail(function () {
console.log('wait2-fail');
});
setTimeout(function () {
wait1.reject();
},1000);
setTimeout(function () {
wait2.reject();
},2000);
$.when(20,wait1,wait2)
.fail(function () {
console.log('fail');
});
可以看出,要触发done,必须当所有的Deferred都触发resolve,而要触发fail,只要任意一个Deferred触发reject即可。$.when的用途就是来管理多个延迟对象,其他只传一个Deferred或者传递的不是延迟对象。都是没什么意义的,并不代表会出错哦。
2 源码解析
在开始源码分析之前,我们先想一想,让我们自己实现这个$.when,应该怎么来实现。首先它肯定是个延迟对象,然后呢,它要等所有的Deferred都触发resolve它才触发resolve,所以需要一个计数器,计数器初始值为参数的个数,某个Deferred触发resolve时,我们就让计数器减1,某个Deferred触发reject时,我们就将计数器置零。然后调用相应的done或者fail,即可。那我们来看jQuery值怎么实现的。
2.1 对象构建
逐行分析:
remaining = length !== 1 || ( subordinate && jQuery.isFunction( subordinate.promise ) ) ? length : 0
当只有一个参数,判断它是不是Deferred,不是的话让计数器为0。其他情况计数器都等于参数的个数。这里忽略了其他参数不为Deferred的情况,而是将处理放在后面进行。
deferred = remaining === 1 ? subordinate : jQuery.Deferred()
如果目前检测出只有一个Deferred时(这种情况就是when的参数只有一个,并且为Deferred),when内部就是用这个Deferred。就如我上面所说的,这样做就没有任何意义了。只是让JS引擎多跑了几个弯而已。如果有多个Deferred,则创建一个新的Deferred。
接下来创建了一个名为updateFunc的函数,它是在执行期执行的,这里跳过。
if ( length > 1 ) {
progressValues = new Array( length );
progressContexts = new Array( length );
resolveContexts = new Array( length );
for ( ; i < length; i++ ) {
if ( resolveValues[ i ] && jQuery.isFunction( resolveValues[ i ].promise ) ) {
resolveValues[ i ].promise()
.done( updateFunc( i, resolveContexts, resolveValues ) )
.fail( deferred.reject )
.progress( updateFunc( i, progressContexts, progressValues ) );
} else {
--remaining;
}
}
}
if判断when有没有参数传递进来,其实这里没必要判断length,判断remaining就可以了。在if中,使用遍历when的所有参数。发现有不是Deferred的,立即--remaining。如果参数是Deferred,则为该Deferred的3个状态(resolve,reject,notify)分别注册函数。注册的这3个函数就是用来当传递进来的这些Deferred有相关动作的时候,让when的Deferred得到通知(--remaining或者触发done或者立即调用fail)。
if ( !remaining ) {
deferred.resolveWith( resolveContexts, resolveValues );
}
如果现在判断when的参数中没有Deferred是,直接触发when的resolveWith方法。因此就会触发done方法列表。
return deferred.promise();
返回一个精简版的Deferred。主要是为了防止在外部修改了when的Deferred的状态。
至此,when所对应的延迟对象构建成功。它是一个不能被修改状态的精简版Deferred。
2.2 执行期
执行期没什么内容,就是去执行upateFunc函数。
updateFunc = function( i, contexts, values ) {
return function( value ) {
contexts[ i ] = this;
values[ i ] = arguments.length > 1 ? core_slice.call( arguments ) : value;
if( values === progressValues ) {
deferred.notifyWith( contexts, values );
} else if ( !( --remaining ) ) {
deferred.resolveWith( contexts, values );
}
};
}
在前面构建期,为参数Deferred添加注册时间时,done,progress是这样的:
done( updateFunc( i, resolveContexts, resolveValues ) )
progress( updateFunc( i, progressContexts, progressValues ) )
然后upateFunc返回一个闭包。闭包中,首先配置values,配置触发resolveWith触发时的参数,这个参数会传递给每一个订阅者。然后判断,如果是progress传递进来的方法,则为触发的是notifyWith。计数器,不做变化,只是调用通知订阅者列表。否则,则先让计数器减减,再判断计数器是否为0,是则触发resolveWith方法。这里的deferred指的是when的Deferred。不能混淆了。
那如果,when的参数中有一个触发了reject呢?就会直接调用deferred的reject方法。
fail( deferred.reject )
因为这里给when的每个Deferred参数的reject添加了一个这样的订阅方法:立即出发deferred的reject方法。
总体来说,when的源码还是比较简单的。
随机推荐
-
T-SQL:毕业生出门需知系列(目录)
一.前言: 作为一个应届毕业生又要准备面试 ASP.NET 攻城狮了,以前在图书馆觉得这本书讲得挺基础,这次回家就自己买了本用来复习,顺便做下读书笔记. 第4版 二.代码下载: 官方:http://f ...
-
[AX2012 R3]在SSRS报表中使用QR二维码
AX2012是自带生成QR二维码的类,可以很方便的用在SSRS报表中,下面演示如何在RDP的报表中使用二维码,首先从定义临时表开始: 字段URL是要用于二维码的字符串,QrCode是container ...
-
iOS 简单工厂模式
iOS 简单工厂模式 什么是简单工厂模式? 简单工厂模式中定义一个抽象类,抽象类中声明公共的特征及属性,抽象子类继承自抽象类,去实现具体的操作.工厂类根据外界需求,在工厂类中创建对应的抽象子类实例并传 ...
-
C# WinFrom 编写正则表达式验证类
public class ValidationRegex { /// <summary> /// 正则表达式字符串 /// </summary> public static s ...
-
libusb-win32 在visual studio2008中成功编译回忆录
关于这个项目不用多说 介绍 libusb是一个针对usb通讯的库. 使用它, 你不需要知道操作系统的细节, 你只需要对USB有足够的了解即可. 它也不需要你写驱动, 所有的工作都可以在用户态完成. 使 ...
-
perl的一些基本用法
ReadLine support available (try 'install Bundle::CPAN')cpan>进入cpan的shell,好了,我为了安装spamassassin,需要安 ...
-
Code Blocks 多文件联合编译
code::blocks是一款据说灰常强大的IDE,以前虽然也经常使用,但一没用过高度功能,二来没用它写过工程性的东西,简单点说就是一个以上的源文件并且加入其他非标准的头文件,今天想做一个多文 ...
-
Android为TV端助力 关于4.0之后不能直接获取SD卡外部存储路径的问题
Environment.getExternalStorageDirectory()是Android 2.x时代的产物,那时Android主流设备只有很小的内置存储器,然后都会外置一张sd卡,那时这个方 ...
-
页面加载过渡页 loading plugin css
是前文 plugin 示例 loading 中需要用到的样式.现在样式扩充为 5类.loadtwo 使用到了bgimg /*loading animation loading one*/ /* loa ...
-
使用gitflow流程完成功能时报错
报错 fatal: could not read Username for 'https://github.com': ······ 原因 使用https方式的时候 在https url 里面没有用户 ...