前言

由於業務需要，需要在封裝的彈窗元件中引入定時器實現倒計時效果，但是如果同時觸發兩個彈窗，就會導致計時器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();
}

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

需要注意的是，每個彈窗是要被銷燬的，不然會導致方法重複。

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

到此這篇關於在vue中封裝的彈窗元件使用佇列模式實現的文章就介紹到這了,更多相關vue 封裝的彈窗元件佇列模式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！