前言
由于业务需要，需要在封装的弹窗组件中引入定时器实现倒计时效果，但是如果同时触发两个弹窗，就会导致计时器bug，前一个弹窗的定时器没有被清除，倒计时就会错乱，此时想到的解决办法就是采用队列模式，将每一个需要的弹窗存到队列中，依次的将弹窗展示出来，同时清除定时器
什么是队列
队列（Queue）是先进先出（FIFO, First-In-First-Out）的线性表。在具体应用中通常用链表或者数组来实现。队列只允许在尾部进行插入操作（入队 enqueue），在头部进行删除操作（出队 dequeue）。队列的操作方式和堆栈类似，唯一的区别在于队列只允许新数据在后端进行添加。
JavaScript实
在Vue开发过程中，为了优化用户体验和管理多个弹窗的出现顺序，可以采用队列模式来封装弹窗组件。本文将详细介绍如何在Vue中利用队列实现弹窗组件的有序显示和定时器管理。
理解队列的概念至关重要。队列是一种特殊的线性表，遵循先进先出（FIFO）原则，即最早进入队列的元素最先被移出。在实际应用中，队列常由数组或链表实现。JavaScript中可以通过Array对象的一些方法来模拟队列的行为，如`push`用于入队，`shift`用于出队。下面是一个简单的ArrayQueue类实现：
```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 arr.length; };
}
```
在Vue中封装弹窗组件时，我们可以创建一个专门的Queue类，用于管理弹窗的入队、出队等操作：
```javascript
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;
```
使用这个Queue类，我们可以在Vue组件中创建一个队列实例，并定义两个方法：`pushDialog`用于将新的弹窗事件入队，`openDialog`用于打开当前队首的弹窗：
```javascript
import Queue from './Queue';
const queue = new Queue();
const pushDialog = (eventName) => {
if (queue.isEmpty()) {
queue.enqueue(eventName);
openDialog();
} else {
queue.enqueue(eventName);
}
};
const openDialog = () => {
// 打开弹窗
const currentDialog = queue.front();
// 这里执行弹窗的显示逻辑，例如倒计时等
// ...
// 在弹窗关闭后，需要将其从队列中移除
queue.dequeue();
};
```
当需要开启倒计时的弹窗时，我们需要在`openDialog`中处理定时器。确保每次打开新的弹窗时，清除之前弹窗的定时器，避免计时错乱。例如：
```javascript
let currentTimer = null;
const openDialog = () => {
const currentDialog = queue.front();
clearTimeout(currentTimer); // 清除旧的定时器
// 开启新的倒计时
currentTimer = setTimeout(() => {
// 倒计时结束后的操作
// ...
// 关闭弹窗并移除
closeDialog();
}, 10000); // 假设倒计时为10秒
// 这里执行弹窗的显示逻辑
// ...
};
const closeDialog = () => {
// 关闭弹窗的逻辑
// ...
// 从队列中移除当前弹窗
queue.dequeue();
};
```
通过这种方式，我们可以确保每个弹窗按照入队的顺序依次显示，且每次只有一个弹窗带有活动的定时器，避免了计时器冲突的问题。在实际项目中，还可以进一步优化这个队列管理器，比如添加错误处理、支持多种类型的弹窗等。
