Javascript檢查類名是否已添加到DIV並執行任務

Question

我有以下功能：

<div class="chat-box"></div>

setInterval(() => {
  let xhr = new XMLHttpRequest();
  xhr.open("POST", "processes/get-chat.php", true);
  xhr.onload = ()=> {
    if(xhr.readyState === XMLHttpRequest.DONE) {
      if(xhr.status === 200) {
        let data = xhr.response;
        chatBox.innerHTML = data;
        // if(!chatBox.classList.contains("active")) {}
      }
    }
  }
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send("incoming_id=" + incoming_id);
}, 500);

if(chatBox.classList.contains("active")) {
  $('html,body').animate({scrollTop: document.body.scrollHeight},"fast");
}

我想檢查chatbox div 是否active了類名並自動移動到 div 的底部。 正在從setInterval函數添加active類。 但是，我不能在setInterval函數中使用 if 條件，因為它將被執行n次，然后我將無法向上滾動並閱讀內容。 它會每n秒帶我到底部。 因此，我希望滾動到底部只執行一次。 為此，我將它放在setInterval函數之外。 但是，這似乎不起作用。 這里有什么問題？ 我怎樣才能使這項工作？ 任何幫助，將不勝感激。 謝謝 ：）

Answer 1

這種事情可以通過添加額外的邏輯和計數器輕松完成。

您定義外部變量let count = 0;

然后在間隔內每次添加 +1。 然后將其添加到您的 if 中，當計數為 1 時僅反應一次。

++count
        if (chatBox.classList.contains("active") && count === 1) {

 < div class = "chat-box" > < /div> let count = 0; setInterval(() => { let xhr = new XMLHttpRequest(); xhr.open("POST", "processes/get-chat.php", true); xhr.onload = () => { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { let data = xhr.response; chatBox.innerHTML = data; ++count if (chatBox.classList.contains("active") && count === 1) { $('html,body').animate({ scrollTop: document.body.scrollHeight }, "fast"); } } } } xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.send("incoming_id=" + incoming_id); }, 500);

或真假邏輯，你會得到圖片：

 < div class = "chat-box" > < /div> let count = true; setInterval(() => { let xhr = new XMLHttpRequest(); xhr.open("POST", "processes/get-chat.php", true); xhr.onload = () => { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { let data = xhr.response; chatBox.innerHTML = data; if (chatBox.classList.contains("active") && count === true) { count = false; $('html,body').animate({ scrollTop: document.body.scrollHeight }, "fast"); } } } } xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.send("incoming_id=" + incoming_id); }, 500);