如何让WebSocket触发的告警函数执行完毕后再重新运行？

因为WebSocket可能每秒收到多条告警，但newAlert需要占用6秒展示时间，核心思路是用队列缓存告警，同时用状态标记控制执行顺序，确保上一个展示完成后再处理下一条。

代码实现 #

// 缓存待处理的告警队列
const alertQueue = [];
// 标记是否正在展示告警，避免并行执行
let isShowingAlert = false;

// 模拟实际的告警展示逻辑：需要6秒完成
async function newAlert(alertInfo) {
    console.log(`开始展示告警：${alertInfo}`);
    // 这里替换成你实际的展示UI逻辑，比如弹出弹窗等
    await new Promise(resolve => setTimeout(resolve, 6000));
    console.log('告警展示结束');
}

// 处理队列的核心函数
async function handleAlertQueue() {
    // 如果正在展示或者队列空，直接返回
    if (isShowingAlert || alertQueue.length === 0) return;

    isShowingAlert = true;
    // 取出队首的告警（先进先出）
    const currentAlert = alertQueue.shift();
    try {
        // 执行告警展示
        await newAlert(currentAlert);
    } finally {
        isShowingAlert = false;
        // 递归处理下一条告警
        handleAlertQueue();
    }
}

// WebSocket收到告警消息时的回调
function onWebSocketMessageReceived(alertData) {
    // 把新告警加入队列
    alertQueue.push(alertData);
    // 尝试启动队列处理
    handleAlertQueue();
}

关键说明 #

• 队列alertQueue会把所有收到的告警先存起来，不管频率多高都不会丢失
• isShowingAlert确保同一时间只有一个newAlert在运行，彻底避免并行展示
• 把newAlert改成异步函数，用await等待6秒的展示过程（实际项目里，你可以把setTimeout替换成UI展示完成的触发事件，比如弹窗关闭的回调）
• 如果想优先展示最新告警、丢弃旧的，可以把alertQueue.push(alertData)改成alertQueue = [alertData]，这样每次新告警来都会覆盖队列，只处理最新的那一条

内容的提问来源于stack exchange，提问作者Dad The Gamer