在vue中封裝的彈窗組件使用隊列模式實現

前言

因爲業務須要，須要在封裝的彈窗組件中引入定時器實現倒計時效果，可是若是同時觸發兩個彈窗，就會致使計時器bug，前一個彈窗的定時器沒有被清除，倒計時就會錯亂，此時想到的解決辦法就是採用隊列模式，將每個須要的彈窗存到隊列中，依次的將彈窗展現出來，同時清除定時器

什麼是隊列

隊列（Queue） 是先進先出（FIFO, First-In-First-Out）的線性表。在具體應用中一般用鏈表或者數組來實現。隊列只容許在尾部進行插入操做（入隊 enqueue），在頭部進行刪除操做（出隊 dequeue）。隊列的操做方式和堆棧相似，惟一的區別在於隊列只容許新數據在後端進行添加。

JavaScript實現隊列的效果

function ArrayQueue(){  
    var arr = [];  
        //入隊操做  
    this.push = function(element){  
        arr.push(element);  
        return true;  
    }  
        //出隊操做  
    this.pop = function(){  
        return arr.shift();  
    }  
        //獲取隊首  
    this.getFront = function(){  
        return arr[0];  
    }  
        //獲取隊尾  
    this.getRear = function(){  
        return arr[arr.length - 1]  
    }  
        //清空隊列  
    this.clear = function(){  
        arr = [];  
    }  
        //獲取隊長  
    this.size = function(){  
        return length;  
    }  
}

和vue封裝的彈窗組件使用

首先要配合組件封裝隊列要進行修改

class Queue {
  dataStore = []
  constructor(){
    this.dataStore=[]
  }
  enqueue(e) {
    this.dataStore.push(e)
    console.warn('入隊',this.dataStore);
  }

  dequeue() {
    this.dataStore.shift()
    console.warn('出隊',this.dataStore);
  }

  front() {
    console.log(this.dataStore,'front')
    return this.dataStore[0]()
  }
  select(){
    return this.dataStore[0]
  }

  back() {
    return this.dataStore[this.dataStore.length - 1]
  }

  isEmpty() {
    if (this.dataStore.length == 0) {
      return true
    }
    return false
  }

  toString() {
    return this.dataStore.join(',')
  }
}

export default Queue

在彈出第一個隊列的時候須要自執行。
在你的封裝組件的函數中引入這個隊列，同時實例化這個隊列，寫入兩個方法.

const pushDialog = (eventName) => {
  if (queue.isEmpty()) {
    queue.enqueue(eventName);
    openDialog();
  } else {
    queue.enqueue(eventName);
  }
}
const openDialog = () => {
  // 打開彈窗
  queue.front();
}

在安裝的方法中將每個彈窗加入隊列中

須要注意的是，每一個彈窗是要被銷燬的，否則會致使方法重複。

舉例在確認方法和定時器後怎麼出隊列和清空定時器