jQuery API之queue、dequeue、clearQueue的使用和实现

queue

• 参数：
  • type：队列类型，默认fx
  • handle：队列任务
• 做用：
  1. 获取队列
  2. handle入队
• 说明：
  1. 一个参数，获取type类型的队列
  2. 两个参数，handle push到type类型的队列中
• code：

// 两个参数(入队操做)
    $('div')
      .queue('china', function (next) {
        console.log('任务1');
        next(); // next指下一个队列任务
      })
      .queue('china', function (next) {
        console.log('任务2');
        next();
      })
      .queue('china', function () {
        console.log('任务3');
      });
      
    // 获取type为china的队列 
    console.log($('div').queue('china')) // 执行结果：输出[ƒ, ƒ, ƒ]
复制代码

dequeue

• 参数：
  • type：队列类型，默认fx
• 做用：
  1. handle出队
• code：

// 出队操做
      $('div').dequeue('china')
复制代码

• 扩展：
  • 自动执行下一次队列任务

// 在handle中添加next回调函数，而且调用
    $('div')
      .queue('china', function (next) {
        console.log('任务1');
        next(); // next指下一个队列任务
      })
      .queue('china', function (next) {
        console.log('任务2');
        next();
      })
      .queue('china', function () {
        console.log('任务3');
      });
      
    // 出队操做
      $('div').dequeue('china');
    // 执行结果：依次输出任务1，任务2，任务3
    console.log($('div').queue('china')); // 执行结果：输出[]
复制代码

clearQueue

• 参数：
  • type：队列类型，默认fx
• 做用：
  1. 清空type类型的队列
• code：

$('div').clearQueue('china');
    console.log($('div').queue('china')); // 执行结果：输出[]
复制代码

实现原理

queue：

1. 给调用者添加type类型的队列
2. 根据参数判断是获取type队列仍是向type队列添加handle

jQuery.prototype.myQueue = function () {
    var queueName = arguments[0] || 'fx', // type
        addFunc = arguments[1] || null, // handle
        len = arguments.length;
    // 只存在type(获取队列)
    if (len === 1) return this[0][queueName];
    // type,handle都存在(入队)
    if (this[0][queueName] === undefined) this[0][queueName] = [addFunc];
    else this[0][queueName].push(addFunc);
    return this
};
复制代码

dequeue：

1. 将handle出队，并执行handle

jQuery.prototype.myDeQueue = function () {
    var _self = this,
        queueName = arguments[0] || 'fx',
        queueArr = _self.myQueue(queueName), // 获取队列
        currFunc = queueArr.shift(); // 出队
    var next = function () { // 递归调用
        _self.myDeQueue(queueName);
    };
    if (currFunc == null) return;
    currFunc(next);
    return _self;
};
复制代码