jQuery队列(三)

时间:2021-04-16 13:04:33

看了一下队列剩下的几个方法,在没有应用场景的情况下,对它所做的一些处理不能明白。后续希望可以通过动画部分代码的阅读能搞清楚这些处理的意义。
jQuery.fn.extend({

// 推迟队列中函数的执行

delay: function( time, type ) {
  // 估计需要看了动画部分的代码才能知道是怎么回事
  time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
  type = type || "fx";
  // 推一个匿名函数到栈中,该函数通过setTimeout延迟特定的函数执行。
  return this.queue( type, function( next, hooks ) {
    var timeout = setTimeout( next, time );
    // 给hooks绑定一个stop方法,目的是特定情况下清楚延时?
    hooks.stop = function() {
      clearTimeout( timeout );
    };
  });
},
// 将空数组推入到栈中,内部通过调用cache机制的access方法用空数组替换掉原本的数组队列内容
clearQueue: function( type ) {
  return this.queue( type || "fx", [] );
},
// 该方法通过调用回调机制来完成对队列内函数执行完成之后的回调
promise: function( type, obj ) {
  var tmp,
  count = 1,

  // 得到一个Deferred对象
  defer = jQuery.Deferred(),
  elements = this,
  i = this.length,

  resolve = function() {
    if ( !( --count ) ) {

      // 将回调的触发环境传进去
      defer.resolveWith( elements, [ elements ] );
    }
  };

  // 参数调整

  if ( typeof type !== "string" ) {
    obj = type;
    type = undefined;
  }
  type = type || "fx";

  while( i-- ) {

    // 等到队列为空时,标记为resolve,说明队列执行完毕,可以准备执行回调。
    tmp = data_priv.get( elements[ i ], type + "queueHooks" );
    if ( tmp && tmp.empty ) {
      count++;
      tmp.empty.add( resolve );
    }
  }
  resolve();

  // 返回promise对象,用户其它地方的监控
  return defer.promise( obj );
  }
});