如何使用jQuery实现服务器新增数据时文本闪烁，兼容多用户同时发消息场景

云上老周

2026-9-28

问题根因

现有逻辑仅在页面初始化时触发1次闪烁效果，点击按钮执行unblink()后没有对应重启闪烁的逻辑
没有存储历史未读消息数做对比，无法判断定时拉取到的是不是新的未读消息，即使有新用户发消息也不会重新启动闪烁

修复后的实现代码

JS 代码

$(document).ready(function() {
  // 存储上一次的未读消息数，初始设为0
  let lastUnreadCount = 0;

  // 页面初始化拉取数据
  $("#new_message").load('new_notification');
  $("#indi").load('indi', function() {
    // 加载完成后取当前未读数，初始有未读就启动闪烁
    const currentCount = parseInt($("#indi").text().trim()) || 0;
    if (currentCount > 0) {
      $("#indi").blink({delay: 100});
    }
    lastUnreadCount = currentCount;
  });

  // 点击下拉按钮停止闪烁
  $('.dropdown-toggle').click(function() {
    $('#indi').unblink();
  });

  // 定时拉取新通知
  setInterval(function() {
    $("#new_message").load('new_notification');
    $("#indi").load('indi', function() {
      // 加载完成后对比未读数
      const currentCount = parseInt($("#indi").text().trim()) || 0;
      // 如果当前未读数 > 上一次记录的，说明有新消息，启动闪烁
      if (currentCount > lastUnreadCount) {
        $("#indi").blink({delay: 100});
      }
      // 更新历史未读数
      lastUnreadCount = currentCount;
    });
  }, 1000);
});

HTML 代码（无需修改，可保留原有逻辑）

<a href="#" class="dropdown-toggle" data-toggle="dropdown">
  <i class="fa fa-envelope-o"></i>
  <span class="label label-success" id="indi"></span>
</a>