jQuery源码分析（十五）：when()方法的使用及源码实现分析

• when方法的语法及使用
• when源码实现分析

 一、when方法的语法及使用

 1.语法：

$.when( deferreds ) 

when本身相当于一个延迟回调对象集合的监听，当监听到所有回调对象都被触发了受理回调，它自身的一个延迟回调对象就会触发受理；反之，当它监听的回调对象中有一个触发了拒绝回调，它自身的延迟回调对象就会触发拒绝回调。

如果when方法不传入回调对象和任何实参，when默认为受理，直接触发它自身的受理回调。

所以，如果只单纯的看when自己的API语法是无法使用它的，应该结合$.Deferred.then方法一起使用，严格来说使用when方法时应该是按照以下模式来使用：

$.when( deferreds ) 
    .then(doneFire,failFire);

关于when的使用就不太多赘述，毕竟使用起来比较简单，下面这个示例可以完整的了解when的使用：

function conso(text){
    console.log(text);
}
$.when(
        a().then(conso,conso,conso),
        b().then(conso,conso,conso),
        c().then(conso,conso,conso)
    )
    .then(function(){
        console.log("三个异步回调全部触发受理:resolve");
    }, function(){
        console.log("三个异步回调没有全部触发受理:reject");
});


function a(){
    var df = $.Deferred();
    setInterval(function(){
        var score = Math.random() * 100;
        if(score > 30){
            df.resolve("a受理");
        }else if(score < 20){
            df.reject("a拒绝");
        }else{
            df.notify('a正在进行');
        }
    },1000);
    return df.promise();
}
function b(){
    var df = $.Deferred();
    setInterval(function(){
        var score = Math.random() * 100;
        if(score > 30){
            df.resolve("b受理");
        }else if(score < 20){
            df.reject("b拒绝");
        }else{
            df.notify('b正在进行');
        }
    },1000);
    return df.promise();
}
function c(){
    var df = $.Deferred();
    setInterval(function(){
        var score = Math.random() * 100;
        if(score > 30){
            df.resolve("c受理");
        }else if(score < 20){
            df.reject("c拒绝");
        }else{
            df.notify('c正在进行');
        }
    },1000);
    return df.promise();
}

 二、when源码实现分析

在了解when的源码之前必须先了解$.Callbacks和$.Deferred以及$.Deferred.then的源码实现，这三个内容我在前面两篇博客中详细的对这两个方法进行了解析以及源码模拟实现代码。连接：

jQuery使用（）：Callbacks回调函数列表之异步编程(含源码分析)

jQuery使用（）：Deferred有状态的回调列表（含源码）

相对于Callbacks和Deferred的实现，when的实现就要简单的多，实现方式非常类似Deferred.then的实现模式，Deferred.then是将后一个then节点的触发执行方法添加到前一个Deferred延迟回调列表上，when也是按照这样的实现方式实现的。

但是jQuery中的when实现还是有些疑问，当被监听的一个延迟回调对象受理是第一个触发，如果后面两个触发都是进行中的话，when自身的回调对象无法正确获取参数（undefined）;如果第一个延迟回调对象进行中被触发，后面的进行中获得参数都是第一个延迟回调对象的参数。（带我解开这个疑惑以后来在补充模拟源码）

关于js的异步回调管理，我会在ES6的Promise中还会根据其API做详细分析，如果有时间也会试着模拟实现兼容API，在Promise中也同样存在着when方法，我尽量抽些时间模拟实现Promise的when方法作为补充。

源码我读了几遍，还是有些不理解为什么要写那么复杂，我自己写了一个简单的，功能目前我的理解来说与官方文档中所描述的没有差别：

when:function(subordinate){
    let i = 0,
        resolveValues = [].slice.call(arguments), //将传入的Deferred对象复制一份添加到一个数组中
        length = resolveValues.length,
        remaining = length !== 1 || (subordinate && typeof subordinate.promise == 'function') ? length : 0, //记录未处理完的deferred个数
        deferred = jQuery.Deferred(),
        
        //更新deferred处理的进度
        updateResolve =  function(value){
            if(remaining > 1){
                remaining --;
            }else if(remaining === 1){
                deferred.resolveWith(this,value);
            }
        },
        updataReject = function(value){
            if(remaining){
                remaining = 0;
                deferred.rejectWith(this,value);
            }
        }
        
        if(length > 0){
            for(;i < length; i++){
                resolveValues[i].done(updateResolve)
                    .fail(updataReject);
            }
        }
    return deferred.promise();    
}