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;
};
複製代碼