在vue中封裝的彈窗組件使用隊列模式實現(xiàn)方法

更新時間：2020年07月23日 11:10:56 投稿：mrr

這篇文章主要介紹了在vue中封裝的彈窗組件使用隊列模式實現(xiàn)方法,本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

前言

由于業(yè)務需要，需要在封裝的彈窗組件中引入定時器實現(xiàn)倒計時效果，但是如果同時觸發(fā)兩個彈窗，就會導致計時器bug，前一個彈窗的定時器沒有被清除，倒計時就會錯亂，此時想到的解決辦法就是采用隊列模式，將每一個需要的彈窗存到隊列中，依次的將彈窗展示出來，同時清除定時器

什么是隊列

隊列（Queue）是先進先出（FIFO, First-In-First-Out）的線性表。在具體應用中通常用鏈表或者數(shù)組來實現(xiàn)。隊列只允許在尾部進行插入操作（入隊 enqueue），在頭部進行刪除操作（出隊 dequeue）。隊列的操作方式和堆棧類似，唯一的區(qū)別在于隊列只允許新數(shù)據(jù)在后端進行添加。

JavaScript實現(xiàn)隊列的效果

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

在彈出第一個隊列的時候需要自執(zhí)行。

在你的封裝組件的函數(shù)中引入這個隊列，同時實例化這個隊列，寫入兩個方法.

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

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