WebSocket安防面板界面：DOM异步致星号重复及回流无效问题求助

这个需求完全可以实现，且能兼容Firefox在内的所有主流浏览器，核心是放弃依赖DOM读取状态，改用前端本地维护的单一状态源来处理重复消息，具体方案如下：

1. 核心思路：用本地状态替代DOM读取 #

DOM更新是异步的，直接读取元素内容会导致状态不同步。我们需要在前端维护一个变量，专门记录当前应显示的星号数量，所有更新都基于这个变量，而非DOM实际内容。

// 初始化本地状态：记录当前应显示的星号数量
let currentStarCount = 0;
const row1Element = document.getElementById('row1');

// 统一更新DOM的方法
function updateRow1() {
  row1Element.textContent = '*'.repeat(currentStarCount);
}

2. 按键发送指令时同步更新本地状态 #

用户按下数字键时，先更新本地状态，再发送指令到后端，同时可以直接更新DOM（或等待后端消息确认，取决于业务需求）：

document.addEventListener('keydown', (e) => {
  // 只处理数字键
  if (!/\d/.test(e.key)) return;
  
  currentStarCount++;
  ws.send(JSON.stringify({ type: 'keyPress', key: e.key }));
  // 立即更新DOM，提升用户体验
  updateRow1();
});

3. 过滤WebSocket重复消息 #

后端发送的重复显示更新消息，我们无需逐条处理，只需要基于本地状态或消息中的有效信息来同步DOM：

场景A：后端消息包含正确的星号数量 #

如果后端能在消息中返回当前应显示的星号总数，直接用该值更新本地状态即可：

ws.onmessage = (event) => {
  const msg = JSON.parse(event.data);
  if (msg.type === 'displayUpdate') {
    // 用后端返回的正确数量覆盖本地状态
    currentStarCount = msg.starCount;
    updateRow1();
  }
  // 处理超时切换日期的情况
  else if (msg.type === 'timeout') {
    currentStarCount = 0;
    row1Element.textContent = new Date().toLocaleString();
  }
};

场景B：后端仅发送重复的追加指令 #

如果后端只能发送“追加星号”的指令，我们可以通过本地状态判断是否需要更新，避免重复追加：

ws.onmessage = (event) => {
  const msg = JSON.parse(event.data);
  if (msg.type === 'appendStar') {
    // 仅当本地状态对应的星号数与DOM显示不一致时更新
    const expectedStars = '*'.repeat(currentStarCount);
    if (row1Element.textContent !== expectedStars) {
      updateRow1();
    }
  }
  // 处理超时逻辑
  else if (msg.type === 'timeout') {
    currentStarCount = 0;
    row1Element.textContent = new Date().toLocaleString();
  }
};

4. 兼容性说明 #

上述方案使用的都是标准JavaScript API（textContent、addEventListener、WebSocket），完全兼容Chrome、Firefox、Safari、Edge等所有主流浏览器，无需额外兼容代码。

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