首页 > 代码库 > jquery源码解析:jQuery工具方法when详解
jquery源码解析:jQuery工具方法when详解
我们先来看when方法是如何使用的:
var cb = $.when(); //when方法也是返回一个延迟对象,源码是return deferred.promise();返回的延迟对象不能修改状态
$.Deferred()也是返回一个延迟对象,那么它们的区别是什么呢?$.Deferred()只能针对一个延迟对象做成功,失败,进行中的操作,而$.when()可以针对多个延迟对象做以上操作。举个例子:
function a(){
var cb = $.Deferred();
cb.resolve();
return cb;
}
function b(){
var cb = $.Deferred();
cb.resolve();
return cb;
}
a().done(function(){alert("成功")});
以上代码,我的需求是等a中的延迟对象触发,以及b中的延迟对象触发,后,再弹出成功。因为这时需要处理两个延迟对象,所以通过 $.Deferred()无法实现。这时就需要用$.when()了。我们把最后面那句代码改成:
$.when(a(),b()).done(function(){alert("成功")});就可以实现上面的需求了。这句代码的意思就是,等a,b中的延迟对象都触发了resolve后,才会执行里面回调方法,弹出成功。
还有一个用法:
$.when(a(),b()).done(function(){alert("成功")}).fail(function(){alert("失败")}),这段代码的意思,只要a或b中的任何一个延迟对象触发reject方法,就会弹出失败。
大家看到when方法里面传的都是延迟对象,而且这个延迟都是具有状态的(调用resolve是成功状态,调用reject是失败状态)。如果传入的不是延迟对象,比如:$.when("chaojidan",b()).done(function(){alert("成功")}).fail(function(){alert("失败")}),那么when方法会忽略chaojidan这个字符串,只会针对b里面的延迟对象进行处理。如果都是字符串,那么将都忽略,直接执行done添加的方法。而且done添加的回调方法中,可以接收到这些字符串(arguments[0]是第一个字符串,arguments[1]是第二字符串,以此类推)。
接下来进行源码解析:
when: function( subordinate , ... , subordinateN ) {
var i = 0,
resolveValues = core_slice.call( arguments ),
length = resolveValues.length,
remaining = length !== 1 || ( subordinate && jQuery.isFunction( subordinate.promise ) ) ? length : 0,
deferred = remaining === 1 ? subordinate : jQuery.Deferred(), //如果传入一个延迟对象,when方法返回的就是这个延迟对象。
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 ) ) { //如果触发的是resolve,remaining就会减1,直到为0,就证明when里面的所有延迟对象都执行了resolve,这时,就会执行when返回的延迟对象deferred的resolveWith,而这将会触发deferred通过done添加的方法。
deferred.resolveWith( contexts, values );
}
};
},
progressValues, progressContexts, resolveContexts;
if ( length > 1 ) { //传入2个以及2个以上的参数时,进入if语句
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 ) ) //如果一个延迟对象触发resolve,就执行updateFunc方法返回的函数,而这个函数会判断所有的延迟对象都触发resolve了没有,如果都触发了,那么就执行when返回的延迟对象的resolve。如果不是全部,那么不做处理
.fail( deferred.reject ) //只要有一个延迟对象触发reject,就会执行when返回的延迟对象的reject。
.progress( updateFunc( i, progressContexts, progressValues ) );
} else { //传入的如果不是延迟对象,就直接减一。
--remaining;
}
}
}
if ( !remaining ) { //当不传参数的时候(或传一个字符串的时候),直接执行这里
deferred.resolveWith( resolveContexts, resolveValues );
}
return deferred.promise();
}
when方法最难的莫过于updateFunc方法,这个方法会返回一个函数,而这个函数会调用updateFunc方法中的参数,形成一个闭包。我们来分析第一个updateFunc方法,updateFunc( i, resolveContexts, resolveValues ),这里假设传进when方法的是a,b两个延迟对象。当第一次循环时,done中的updateFunc方法,i=0,resolveContexts = [undefined , undefined ],resolveValues =[a,b],执行updateFunc方法返回一个function。progress中的updateFunc方法,i=0,progressContexts = [undefined , undefined ],progressValues =[undefined , undefined ],执行updateFunc方法返回一个function。第二次循环时,只是i=1,其他都是一样的。之后,我们触发a的resolve方法,这时就会执行i=0的这个function。
function( value ) { //如果resolve没有传参数,那么value为undefined。其中函数中的contexts=resolveContexts,values = resolveValues
contexts[ i ] = this;
values[ i ] = arguments.length > 1 ? core_slice.call( arguments ) : value; //如果没有传入参数,那么arguments.length=0,resolveValues[0] = undefined。resolveValues=[undefined , b],延迟对象a就变成undefined
if( values === progressValues ) { //[undefined , b]不是[undefined , undefined ],就把remaining减一,刚开始remaining是2,因为传入了两个延迟对象a,b。
deferred.notifyWith( contexts, values );
} else if ( !( --remaining ) ) { //减1后,还是1,所以不执行下面的方法。
deferred.resolveWith( contexts, values );
}
}
当b执行resolve方法时,也会执行上面的function,这时i=1,所以resolveValues[1] =undefined,resolveValues=[a, undefined ],它不等于[undefined , undefined ],所以执行--remaining,这时remaining变成0了,就会执行deferred.resolveWith( contexts, values );方法了。因为这时a,b两个延迟对象都执行了resolve了。
上面讲的都是执行延迟对象a,b的resolve方法。我们再来讲一下执行a,b的notify方法。
我们首先执行a的notify方法,这时会执行i=0的function
function( value ) { //如果notify没有传参数,那么value为undefined。其中函数中的contexts=progressContexts ,values = progressValues
contexts[ i ] = this;
values[ i ] = arguments.length > 1 ? core_slice.call( arguments ) : value; //如果没有传入参数,那么arguments.length=0,progressValues[0] = undefined。progressValues =[undefined , undefined]
if( values === progressValues ) { //[undefined , undefined ]还是[undefined , undefined ],就进入if语句,触发when返回的延迟对象deferred的notify方法,当然会触发deferred的progress添加的函数。
deferred.notifyWith( contexts, values );
} else if ( !( --remaining ) ) {
deferred.resolveWith( contexts, values );
}
}
也就是不传参(value等于undefined)的情况下,触发其中一个(a或b)notify,也会触发when返回的延迟对象的notify。
那如果传参的话,function执行的流程就不是上面的流程了,传参还分一个还是多个这两种情况。按照我上面的执行流程,很容易理解。说实话,没必要,知道大概的执行流程就行了,最重要的知道怎么用就行了。
加油!
jquery源码解析:jQuery工具方法when详解