Wie blinkt das Chatfenster in JavaScript?

Question

Ich habe zwei Chat-Boxen. Wenn ich eine neue Nachricht von anderen erhalte, sollte der Chat-Box-Header blinken. Hier habe ich socket.js verwendet, um die Nachrichten zu senden und zu empfangen. Momentan kann ich eine Chat-Box blinken lassen. Aber ich kann diese Chatboxen nicht gleichzeitig mit diesem Timer blinken lassen. Ein Beispiel für das gewünschte Verhalten finden Sie im Facebook Chat-Fenster oder Hangouts Chat-Fenster. Ich habe Javascript Timer verwendet, um diese Chat-Box für Zeit zu blinken.

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-Beispielcode hier:

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

Das Beispielbild hier, bitte einen Blick auf sie haben:

Hier mein eigentliches Problem ist, wenn ein erstes Chat-Fenster eine Nachricht auf inaktiv empfängt. Ich starte einen Timer, um Chat-Fenster für Zeit zu blinken. dann erhält das zweite Chat-Fenster eine Nachricht und startet den Timer. Hier ist das Problem, welchen Timer ich löschen sollte Intervall des Timers? Wie starte und beende ich den Timer für jeden einzelnen Chat-Bildschirm?

Answer 1

Sie verwenden eine ID, und aus Ihrer Beschreibung schließe ich, dass Sie mehr als ein Element mit der gleichen ID haben. In diesem Fall sollten Sie ein anderes Attribut verwenden, um auf die Chatboxen zu zielen. Verwenden Sie zum Beispiel eine Klasse:

HTML

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

Javascript

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