$.when()是$.Deferred()的辅助方法。
一、when的用法。
when接受多个Deferred对象作为入参,有以下几种情况:
1.没有入参或者入参都不是Deferred对象时,直接执行$.when().done()中添加的函数。
$.when()
.done(function(){
alert("OK");
})
.fail(function(){
alert("failed") ;
});
var a , b, c;
$.when(a,b,c)
.done(function(){
alert("OK");
})
.fail(function(){
alert("failed") ;
});
2.1个Deferred对象作为入参时,如果Deferred对象成功了,则执行$.when().done()添加的事件,失败则执行when的fail添加的函数。
var dfd1= $.Deferred();
dfd1.done(function(){
alert(1);
});
$.when()
.done(function(){
alert("OK");
})
.fail(function(){
alert("failed") ;
});
dfd1.resolve();
3.多个Deferred对象作为入参时,所有的Deferred对象成功完成,则触发$.when().done()中添加的事件,失败则执行$.when().fail()添加的事件。
var dfd1= $.Deferred(),
dfd2= $.Deferred();
dfd1.done(function(){
alert(1);
});
dfd2.done(function(){
alert(2);
});
$.when(dfd1,dfd2)
.done(function(){
alert("OK");
})
.fail(function(){
alert("failed");
});
dfd1.resolve();
dfd2.reject();
二、源码解析
(1)当when之中只有一个入参时
我们发现源码之中,把入参赋给了内部的deferred对象,这个对象时在$.when之中创建并且返回的。在这种情况下,会跳过中间的步骤,直接到最后,返回return deferred.promise() ,也就是返回入参的promise对象,然后再这个对象上又添加了done事件和fail事件(可以在同一个deferred对象上添加多个done或者fail,按顺序执行)。
当执行完deferred对象的resolve之后,执行done之中添加的函数。
(2)当有多个入参时
当有多个入参时,$.when()内部会创建一个deferred对象,该对象用来回调$.when().done().fail()中添加的函数。看下原理:
<pre name="code" class="javascript">when: function( subordinate /* , ..., subordinateN */ ) {
var i = 0,
resolveValues = slice.call( arguments ), //把arguments对象变为数组
length = resolveValues.length,
// the count of uncompleted subordinates
remaining = length !== 1 || ( subordinate && jQuery.isFunction( subordinate.promise ) ) ? length : 0,//剩余未执行的事件
// the master Deferred. If resolveValues consist of only a single Deferred, just use that.
deferred = remaining === 1 ? subordinate : jQuery.Deferred(), //Deferred对象,一个入参则把入参赋给变量,多个或者没有,则创建
if ( length > 1 ) { //如果when中传入的参数大于1个,进入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 ) ) { //Deferred对象则进入if
resolveValues[ i ].promise() //入参deferred对象又添加done fail等事件
.done( updateFunc( i, resolveContexts, resolveValues ) ) //执行updateFunc
.fail( deferred.reject ) //外部入参fail回调添加内部deferred对象的reject方法
.progress( updateFunc( i, progressContexts, progressValues ) );
} else {
--remaining;
}
}
}
// If we're not waiting on anything, resolve the master
if ( !remaining ) { //如果remaining0,进入if
deferred.resolveWith( resolveContexts, resolveValues );
}
return deferred.promise();
传入的Deferred对象,执行成功后,回调done事件中updateFunc内部返回的匿名函数,然后--remaining,如果作为入参的Deferred对象全部成功执行,remaining为0,那么deferred.resolve()执行,回调$.when().done()添加的回调。如果,有一个执行不成功,外部入参fail事件触发,执行内部deferred.reject(),那么接着回调$.when().fail()中添加的回调
updateFunc = function( i, contexts, values ) {
return function( value ) {
contexts[ i ] = this;
values[ i ] = arguments.length > 1 ? slice.call( arguments ) : value;
if ( values === progressValues ) {
deferred.notifyWith( contexts, values );
} else if ( !( --remaining ) ) {
deferred.resolveWith( contexts, values );
}
};
},