防止JQuery .HTML覆蓋之前的.HTML顯示

Question

我目前使用多維數組來存儲值，然後基於它是否滿足兩個要求來循環它，是否匹配並且它具有設置狀態EG 487在線。

這個變化是基於什麼事件發生在服務器想法中的MD數組中被捕獲和插入的，並且事物的所有事物都是盛大的。

我試圖視覺代表呼叫的每個狀態的格式如下：

1. 如果手機設備在線反過來瓦紅色否則變成綠色，做.HTML。
2. 如果手機正在振鈴轉動黃色並做.HTML。
3. 如果手機處於通話狀態，請將橙色貼紙打開並做.HTML。
4. 如果手機剛剛掛斷然後做.HTML（但它不這樣做），然後通過一個CSS類使用.addClass變藍......然後在3秒後將其刪除。 （它不會否則顯示，因爲狀態在線被逮住之後，所以你甚至不看它，因此使用的setTimeout制止這種變成藍色。）

步驟1至3個工作相應的問題步驟4

進來

這個問題是我使用JQuery.HTML來覆蓋瓦片中的內容每次手機改變狀態，但經過一些調試和擺弄後，我發現這個問題似乎是JQuery .HTML和/或如何我正在使用它和setTimeOut我認爲但我不知道爲什麼。

問題是掛斷事件被逮住........這裏.HTML似乎不顯示和似乎得到由.HTML中得到後直接抓住了在線活動覆蓋掛斷並因此顯示來自在線事件的.html。

我發現，當我在第1步刪除.HTML它停止了問題，但我需要它在第1步。但是，如果我把它留在那裏它似乎是覆蓋.HTML在第4步，我也需要一些原因。

陣列看起來是這個樣子的分機號碼，SIP設備的狀態，當前的狀態下，設備是如鈴聲：

[ '487', 'online', 'Hangup' ], 
    [ '488', 'online' ], 
    [ '477', 'online', 'Hangup' ] ] 

什麼服務器端的事件通常看起來像在該事件被抓住了這一點：

477 and 487 both hungup 
[ [ '487', 'online', 'Hangup' ], [ '477', 'online', 'Hangup' ] ] 
something happened to a ChannelDestroyed 
Channel Output ChannelDestroyed 
something happened to an endpoint 
EndpointStateChange 
477 current state is: online 
[ [ '487', 'online', 'Hangup' ], [ '477', 'online', 'Hangup' ] ] 

這是我的時刻代碼：

//Handles events to signal current call states aka if 488 dials 487 highlight both tiles with those values. 
socket.on("eventsCalls", function (calldata) { 
    for (var i = 0; i < calldata.length; i++) { 
     if (calldata[i][0] && calldata[i][2] === "Ringing") { 
      $("div[class*='tile']:contains('" + calldata[i][0] + "')").css("background-color", "yellow").append("<h4>User</h4><p>" + calldata[i][0] + " Is Ringing</p>"); 
     } else if (calldata[i][0] && calldata[i][2] === "Hangup") { 
      $("div[class*='tile']:contains('" + calldata[i][0] + "')").html("<h4>User</h4><p>" + calldata[i][0] + " just hungup</p>").addClass("hangup"); 
      setTimeout(function() { 
       $("div[class*='tile']").removeClass("hangup"); 
      }, 3000); 
     } else if (calldata[i][0] && calldata[i][2] === "ANSWER") { 
      $("div[class*='tile']:contains('" + calldata[i][0] + "')").css("background-color", "orange").html("<h4>User</h4><p>" + calldata[i][0] + " Is Busy</p>"); 
     } 
    } 
}); 
// Handles which sip devices are currently registered and displays them on the web page. 
socket.on("eventsRegister", function (regisdata) { 
    for (var i = 0; i < regisdata.length; i++) { 
     if (regisdata[i][0] && regisdata[i][1] === "online") { 
      $("div[class*='tile']:contains('" + regisdata[i][0] + "')").css("background-color", "green").html("<h4>User</h4><p>" + regisdata[i][0] + " Online</p>"); 
     } else if (regisdata[i][0] && regisdata[i][1] === "offline") { 
      $("div[class*='tile']:contains('" + regisdata[i][0] + "')").css("background-color", "red").html("<h4>User</h4><p>" + regisdata[i][0] + " Offline</p>"); 
     } 
    } 
}); 

我有沒有更好的替代方案或解決此問題的方法？

編輯：JSFiddle想知道什麼是努力去複製事件的捕捉，但是當它遇到困境時.html似乎被在線事件覆蓋，這似乎是在我想的同時發生的。它不能像我的代碼上的最後兩個事件那樣工作，顏色會改變，但掛起的.HTML似乎被在線覆蓋。

Answer 1

我不能肯定地說，但你的setTimeout缺少delay參數。

var hangupDelay = 5000; // 5 seconds. 
setTimeout(function() { 
       $("div[class*='tile']").removeClass("hangup"); 
      }, hangupDelay); 

無論如何，這應該在5秒後刪除掛斷類。

如果您沒有指定setTimeout延遲參數;你得到它幾乎立刻：

https://developer.mozilla.org/en/window.setTimeout#Minimum_delay_and_timeout_nesting

延遲爲毫秒（千分之一秒）的 函數調用應該被延遲的數量。如果省略，則默認爲0. 實際延遲可能會更長;請參閱以下注釋。

這可能會導致掛斷類被立即刪除，並顯示不能正常工作。