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

Posted 2023-02-23

【中文标题】Javascript 检查类名是不是已添加到 DIV 并执行任务

【英文标题】：Javascript check if a class name has been added to DIV and perform taskJavascript 检查类名是否已添加到 DIV 并执行任务

【发布时间】：2021-09-18 01:56:44

【问题描述】：

我有以下功能：

<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 函数之外。但是，这似乎不起作用。这里可能是什么问题？我怎样才能使这项工作？任何帮助，将不胜感激。谢谢:)

【问题讨论】：

我怀疑你的聊天框 div 在调用滚动时是空的。当它在你的 setInterval 方法中时，你以前有这个工作吗？如果是这样并且您只希望它运行一次，那么您不能添加一个设置为 true/false 的全局变量，以便它只滚动一次。之后检查你的变量，看看你是否应该向下滚动。

如果您将滚动条移到 setInterval 之外，那么它将运行一次，但它将在 setInterval 运行之前运行，因此在 ajax 请求之前运行，因此在设置类之前运行。

@Nathelol 你猜对了。此外，在我自己尝试您的逻辑之前，@ikik 发布了一个与您的逻辑相同的答案。我已经接受了。谢谢:)

@freedomn-m 感谢您提供的信息... 教育 :)

【参考方案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);

【讨论】：

我更喜欢 true....false 逻辑只是为了避免使用数字并使其更简单......但是，由于某种原因，在我的情况下它是 if(!chatBox.....) NOT 符号在此是必需的，如评论中所述我在setInterval 部分的问题。线路结束，工作就像一个魅力。谢谢:)

添加附加意见：let scrolled = false ... scrolled = true（名称“count=true”有点混乱，但仅用于代码演示重用以前的代码）。或者let scrollNeeded=true .. scrollNeeded=false 所以如果你不喜欢if (! 构造，你就没有if (!scrolled。尽量不要使用负变量名，因为它们会更加混乱。 let notScrolled=true notScrolled=false if (!notScrolled... err.. :)