前言

由于業(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();}

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

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

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

到此這篇關(guān)于在vue中封裝的彈窗組件使用隊列模式實現(xiàn)的文章就介紹到這了,更多相關(guān)vue 封裝的彈窗組件隊列模式內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！