如何在JavaScript中闪烁聊天窗口？

Question

我有两个聊天框。当我收到其他人的新消息时，应该闪烁的聊天框标题。在这里，我使用socket.js发送和接收消息。现在我可以闪烁一个聊天框。但我无法使用此计时器同时闪烁这些聊天框。可以在Facebook聊天窗口或环聊聊天窗口中找到所需行为的示例。我使用JavaScript计时器在这个聊天框中闪烁了一段时间。

JavaScript的：

function start(){
    clearTimeout(this.backgroundInterval);
    var $chatdivtoblink = $("#chat-header-window");
        this.backgroundInterval = setInterval(function(){
        $chatdivtoblink.toggleClass("backgroundRed");
     },1500)
}

function stop(){
   console.log("stop " + this.backgroundInterval);
   clearTimeout(this.backgroundInterval);
}

CSS：

.backgroundRed {
     background: #000;
}

HTML示例代码：

<div class="chatElement chatBox" id="chatContainer-99"><div class="chat-header" id="chat-header-window"><div class="chat-header-content"></div></div>

此处的示例图片，请看一下：

当第一个聊天窗口收到非活动消息时，我的真正问题是。我开始计时器闪烁聊天窗口一段时间。然后第二个聊天窗口收到一条消息并启动计时器。这是定时器应该清除定时器间隔的问题？如何为每个聊天窗口屏幕启动和停止计时器？

Answer 1

您正在使用ID，并且根据您的说明，我推断您有多个具有相同ID的元素。在这种情况下，您应该使用不同的属性来定位聊天框。例如，使用类：

<强> HTML

<div class="chat-header-window">

<强>的Javascript

var $chatdivtoblink = $(".chat-header-window");