第三十一课：JSDeferred详解2

这一课，我们先接着上一课讲一下wait方法，以及wait方法是如何从静态方法变化实例方法的。

首先我们先看wait方法为啥可以从静态方法变成实例方法，请看register源码：

Deferred.register= function(name, fun){  //name="wait",fun=Deferred.wait；

　　this.prototype[name] = function(){   //this=Deferred，this.prototype[name]  = Deferred.prototype.wait。

　　　　var a = arguments;

　　　　return this.next(function(){　　return fun.apply(this,a)}　　)

　　};

};

然后我们来看wait方法为啥可以延迟执行fun2函数？

我们上一课的例子：Deferred.next(function fun1(){alert(1)}).wait(1).next(function fun2(){alert(2)}); 这里调用的wait方法其实是：

function(){

　　　　var a = arguments;

　　　　return this.next(　function(){　　return fun.apply(this,a)     }　)     //fun = Deferred.wait，this指的是第一个next方法（静态方法）返回的Deferred实例d1

};

因为你传入了1，所以a=1，然后执行this.next方法，因为这时的this是实例对象，因此调用实例对象的next方法。这时就会把function(){　　return fun.apply(this,a)}，添加给d1._next（Deferred实例对象d2）的callback.ok属性。返回d2。接着执行d2的next方法，返回d2._next（d3）。这时候，等静态方法next的定时器结束后（0秒后，实际是几毫秒后，当然每个浏览器不一样），执行队列上就会执行fun1方法，执行结束后，就会立即执行function(){　　return fun.apply(this,a)     }，也就是执行Deferred.wait.apply(this,1),this是d2。

Deferred.wait = function(n){

　　var d= new Deferred() , t = new Date();    //这里又新建一个Deferred，我们称为d4.

　　var id = setTimeout(function(){

　　　　d.call((new Date()).getTime() - t.getTime());

　　}, n * 1000);    //延迟一秒后，再执行d4.call(1000);这里的d4没有设置callback.ok属性值，因此使用它的默认值：Deferred.ok = function(x) { return x};因为这里延迟一秒后才执行，所以会执行下面的代码，也就是返回d4.这时候，你在_fire里面就可以看到，当next中添加的回调函数返回Deferred对象时，会执行这个操作value._next = this._next;也就是把 d4._next = d2._next。因此过了一秒后，执行d4的callback.ok方法，这时返回的值是1000，就会继续执行d4._next(d3)的回调函数fun2。

　　d.canceller = function(){

　　　　clearTimeout(id);

　　}

　　return d;

}

Deferred.register("wait",Deferred.wait);  //这里就是把静态方法wait变成实例方法wait的。

因此，wait方法，可以延迟执行wait方法后面的next中添加的回调函数，非常有用，我们可以像时钟那样，想过多久执行这个函数，就过多久执行。

接下来，我们来看一下JSDeferred的并归结果：

JSDeferred最厉害之处，是它的parallel的实现。这个parallel是来解决这类问题的：有一个业务，需要发起4个Ajax请求，这4个请求的地址和返回时间不一样，必须等到它们都处理完成后，整合它们4个的返回数据，然后根据这个整合的数据再发起两个ajax请求，等到这两个ajax请求全部处理完成，整合这两个请求的数据后，再进行一次ajax请求，返回数据才算一次业务处理成功。

我们先来看一下它是如何使用的：

Deferred.parallel(function(){ return 1 },function(){ return 2 },function(){ return 3 }).next(　　function(a){　console.log(a);　　//[1,2,3]　　}　　)

上面这段代码的意思是：先执行第一个匿名函数，执行完后，再执行第二个匿名函数，接着再执行第三个匿名函数，等第三个执行完后，才会执行next中添加的匿名函数，而且可以接收到parallel中匿名函数返回的值。

我们再弄一个我们前端开发中经常会使用的操作：

function ajax(url){   //模拟ajax请求

　　var d = new Deferred();

　　var delay = url.match(/time=(\d+)/)[1];   // 此正则/time=(\d+)/，会取到字符串time=2000，因为match方法，所以会返回一个数组，数组第一项是匹配的整个字符串，也就是"time=2000"，数组的第二项就是第一个子表达式取到的值,这里是2000（通过\d+取到的），因此delay = "2000"

　　setTimeout(function(){   //这里模拟ajax请求，也就是2秒后ajax请求结束，执行回调函数。

　　　　d.call(delay);     //告诉parallel，我执行完了。只有等三个ajax方法，都执行完了后，才会执行next中添加的回调函数。

　　},+delay)

　　return d;   //当第一个ajax方法执行到这里时，就会继续执行第二个ajax方法（不会等2秒后，才执行第二个ajax方法）。

}

Deferred.parallel(

　　ajax("chaojidan?time=2000"),     //ajax请求1，花费2秒

　　ajax("chaojidan?time=3000"),    //ajax请求2，花费3秒

　　ajax("chaojidan?time=4000") 　　//ajax请求3，花费4秒

).next(function(a){

　　console.log(a);    //   a=[2000,3000,4000]

});

上面代码执行的顺序，先执行第一个ajax方法，但是ajax请求是需要时间的，那么第二个ajax方法会等到第一个ajax请求结束后（也就是ajax的请求完成，readyState等于4的时候），再执行（这时执行完parallel需要9秒的时间），还是等第一个ajax方法return后（也就是ajax请求刚开始，readyState=2，貌似opera浏览器没有状态2，这里忽略），就执行（这时执行完parallel需要4秒时间，取三个ajax请求时间花费最多的值）。毫无疑问，这里讲的是异步编程，所以parallel执行完需要4秒时间，三个ajax请求互不影响，但是必须等这三个ajax请求都结束后，才会执行next中添加的回调函数。这很容易实现上面的那个业务需求。

最后，我们来看parallel方法的源码解析：

Deferred.parallel = function(d2){

　　var isArray = false;

　　if(arguments.length > 1){    //如果参数大于1，就把参数弄成数组形式，我们的例子就是执行这里

　　　　d2 = Array.prototype.slice.call(arguments);

　　　　isArray = true;

　　}

　　else if(Array.isArray && Array.isArray(d2) ){  //如果传入的本身是一个数组

　　　　isArray = true;

　　}

　　var ret = new Deferred(),

　　　　values = {},

　　　　　　num = 0;

　　for(var i in d2){    //数组也可以使用for in方式来遍历

　　　　if(d2.hasOwnProperty(i)){   //数组有属性值0,1,2...

　　　　　　(function(d,i){    //第一个例子，这里的d就是function(){return 1}，第二个例子，这里的d就是new出来的Deferred实例对象
　　　　　　　　if(typeof d == "function"){

　　　　　　　　　　d2[i] = d = Deferred.next(d);  // 如果是函数，就转换成Deferred对象。这里调用的是静态方法next。因此过了浏览器的最小时钟间隔，就会马上执行d.next方法添加的回调函数。

　　　　　　　　}

　　　　　　　　d.next(function(v){    //如果传入的是Deferred实例对象d5，那么必须等到d5调用call方法后，才会执行这里next添加的回调函数。

　　　　　　　　　　values[i] = v;

　　　　　　　　　　if(--num <=0){    //只有等数组中的函数都执行完毕后，或者数组中的Deferred实例对象都调用了call方法后，就会进入if语句，执行ret.call。

　　　　　　　　　　　　if(isArray){

　　　　　　　　　　　　　　values.length = d2.length;   //给json对象values添加length属性。把普通json转换成特殊json。

　　　　　　　　　　　　　　values = Array.prototype.slice.call(values,0);    //特殊的json对象，可以通过数组的slice方法，转换成数组

　　　　　　　　　　　　}

　　　　　　　　　　　　ret.call(values);

　　　　　　　　　　}

　　　　　　　　});

　　　　　　　　num++;    //根据上面的例子，这里的num最终会变成3。

　　　　　　})(d2[i],i);

　　　　}

　　}

　　if(!num){   //如果parallel方法中没有传入参数，那么就直接执行ret.call();

　　　　Deferred.next(function(){     //因为调用的是Deferred静态的next方法，因此过了浏览器的最小时钟间隔，就会立刻执行ret.call方法

　　　　　　ret.call();

　　　　})

　　}

　　return ret;   //返回回去的ret对象，它的._next = d4(parallel方法后面的next方法创建的Deferred实例对象)，因此只要调用了ret的call方法，就会执行next中添加的回调函数。

}

如果上一课没看懂，这一课基本上就是挂掉的，有点复杂，初学者莫看。

加油！