前言

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

什么是隊(duì)列

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

JavaScript實(shí)現(xiàn)隊(duì)列的效果

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

和vue封裝的彈窗組件使用

首先要配合組件封裝隊(duì)列要進(jìn)行修改

class Queue { dataStore = [] constructor(){ this.dataStore=[] } enqueue(e) { this.dataStore.push(e) console.warn(’入隊(duì)’,this.dataStore); } dequeue() { this.dataStore.shift() console.warn(’出隊(duì)’,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

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

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

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

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

需要注意的是，每個彈窗是要被銷毀的，不然會導(dǎo)致方法重復(fù)。

舉例在確認(rèn)方法和定時器后怎么出隊(duì)列和清空定時器

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