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执行的流程就不是上面的流程了,传参还分一个还是多个这两种情况。按照我上面的执行流程,很容易理解。说实话,没必要,知道大概的执行流程就行了,最重要的知道怎么用就行了。

 

 

 

加油!

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。