前言

由于業務需要，需要在封裝的彈窗組件中引入定時器實現倒計時效果，但是如果同時觸發兩個彈窗，就會導致計時器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 封裝的彈窗組件隊列模式內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！