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 的底部。 active 类是从 setInterval 函数中添加的。但是，我不能在 setInterval 函数中使用 if 条件，因为它将在 n 的时间内执行，然后我将无法向上滚动并阅读内容。它会每隔n 秒将我带到底部。因此，我希望滚动到底部只执行一次。为此，我将它放在setInterval 函数之外。但是，这似乎不起作用。这里可能是什么问题？我怎样才能使这项工作？任何帮助，将不胜感激。谢谢:)

Answer 1

这种事情可以通过添加额外的逻辑和计数器来轻松完成。

你定义外部变量let count = 0;

然后在区间内你每次加+1。然后将此添加到您的 if 中，仅在 count 为 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);

OR真假逻辑，你懂的：

< 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);