Question

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

2021-07-07

181

javascript jquery if-statement setinterval contains

我有以下函数：

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

或真假逻辑，您将得到以下图片：

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