如何阻止SignalR对告警消息进行排队？

首先得明确：原生的alert()是同步阻塞的——也就是说第一个弹窗弹出来后，后续的JavaScript代码会暂停执行，直到用户点击「确定」。但如果你的告警是通过异步方式触发的（比如服务器推送消息时用setTimeout或者类似的异步调用），就会出现消息排队、弹窗逐个弹出的情况。

要实现「只显示第一条，点击后清除所有排队告警」的需求，你可以通过维护一个全局消息队列+状态标记的方式来处理，下面给你两种可行的方案：

方案1：基于原生Alert的简单实现 #

这种方案不需要修改UI，直接用原生弹窗就能搞定：

// 全局变量：存储排队的告警消息，标记当前是否有弹窗在显示
let alertQueue = [];
let isAlertActive = false;

function triggerAlert(message) {
  if (!isAlertActive) {
    // 没有弹窗在显示，触发第一条告警
    isAlertActive = true;
    alertQueue.push(message);
    
    // 显示第一条消息，用户关闭后清空队列并重置状态
    alert(alertQueue[0]);
    alertQueue = [];
    isAlertActive = false;
  } else {
    // 已有弹窗在显示，把消息加入队列（后续会被清空）
    alertQueue.push(message);
  }
}

原理说明： #

• 当第一条告警触发时，isAlertActive会被设为true，后续的11条消息只会被加入队列，不会立刻弹出；
• 等用户点击「确定」关闭第一条弹窗后，队列会被直接清空，后续排队的消息也就不会再显示了。

如果你的告警是异步触发的（比如SignalR推送消息），这个逻辑完全适用——因为异步回调会等待当前的alert()执行完毕，但此时队列已经被清空，不会再触发新的弹窗。

方案2：自定义弹窗（更灵活的控制） #

如果需要更美观的弹窗样式，或者想更精细地控制弹窗行为，建议用自定义弹窗代替原生alert()：

首先在页面中添加自定义弹窗的HTML结构：

<!-- 自定义弹窗容器 -->
<div id="customAlert" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 2rem; background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 9999;">
  <p id="alertContent" style="margin: 0 0 1.5rem;"></p>
  <button id="closeAlertBtn" style="padding: 0.5rem 1rem; border: none; background: #007bff; color: white; border-radius: 4px; cursor: pointer;">确定</button>
</div>

然后编写对应的JavaScript逻辑：

let alertQueue = [];
let isAlertShowing = false;

const customAlert = document.getElementById('customAlert');
const alertContent = document.getElementById('alertContent');
const closeBtn = document.getElementById('closeAlertBtn');

// 绑定弹窗关闭事件
closeBtn.addEventListener('click', () => {
  customAlert.style.display = 'none';
  isAlertShowing = false;
  // 清空所有排队的消息
  alertQueue = [];
});

function triggerAlert(message) {
  if (!isAlertShowing) {
    alertQueue.push(message);
    showFirstAlert();
  } else {
    alertQueue.push(message);
  }
}

function showFirstAlert() {
  if (alertQueue.length > 0 && !isAlertShowing) {
    isAlertShowing = true;
    // 只显示队列中的第一条消息
    alertContent.textContent = alertQueue[0];
    customAlert.style.display = 'block';
  }
}

优势： #

• 可以完全自定义弹窗的样式，和你的应用UI保持一致；
• 能更灵活地处理关闭事件，比如添加动画、触发其他业务逻辑等。

不管用哪种方案，核心逻辑都是：用全局状态控制弹窗是否在显示，排队的消息在用户关闭第一条弹窗后全部清空。

内容的提问来源于stack exchange，提问作者Tyriddik