Javascript 检查 class 名称是否已添加到 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 是否有 class 名称 active 并自动移动到 div 的底部。 active class 是从 setInterval 函数添加的。但是，我不能在 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);

Javascript 检查 class 名称是否已添加到 DIV 并执行任务

Javascript check if a class name has been added to DIV and perform task

javascript

jquery

if-statement

setinterval

contains