第三十一课：JSDeferred详解2

浏览数：33 / 时间：2015年06月09日

这一课，我们先接着上一课讲一下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 = {},