第三十一课: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中添加的回调函数。

}

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

加油!

原文地址:https://www.cnblogs.com/chaojidan/p/4184745.html