首页 > 代码库 > 第三十一课:JSDeferred详解2
第三十一课: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中添加的回调函数。
}
如果上一课没看懂,这一课基本上就是挂掉的,有点复杂,初学者莫看。
加油!
第三十一课:JSDeferred详解2