按下按钮后如何延迟删除课程？

Posted 2023-05-06

【中文标题】按下按钮后如何延迟删除课程？

【英文标题】：How to remove a class with delay after a button is pressed?

【发布时间】：2021-11-16 20:51:01

【问题描述】：

我的网站上有一个完整的页面导航。为了确保在打开导航时页面不能滚动，body 获取了隐藏溢出的“no-scroll”类。当导航打开时，这也会删除滚动条。

当再次按下导航按钮并关闭导航时，“no-scroll”类从正文中删除，立即显示滚动条。导航栏需要 1.05 秒才能完全关闭。我试图实现的是不要立即删除“无滚动”类，而是延迟删除。有没有办法做到这一点？

这是我目前必须在按钮单击时添加和删除类的代码：

<script>
  // when DOM is ready
    document.addEventListener('DOMContentLoaded', () => 
     // on .nav-menu-button click
     document.querySelectorAll('.nav-menu-button').forEach(trigger => 
      trigger.addEventListener('click', function() 
        this.x = ((this.x || 0) + 1)%2; 
        if(this.x) // 1st click
          document.querySelectorAll('body').forEach(target => target.classList.add('no-scroll'));
        
        else // 2nd click (toggle)
          document.querySelectorAll('body').forEach(target => target.classList.remove('no-scroll'));
         
      );
     );
    );
</script>

提前致谢！

【问题讨论】：

你可以在变量中使用setInterval，完成后使用clearInterval。

你的 .no-scroll 类中的过渡是 CSS 延迟吗？如果是，您可以将其移至.nav-menu-button，以便在切换.no-scroll 时随时触发。您也可以使用document.querySelectorAll('.nav-menu-button').forEach(trigger => trigger.addEventListener('click', function() $this.classList.toggle('no-scroll');); ); 代替您的if else。

【参考方案1】：

您可以使用 WebAPI 中的 setTimeout 函数，这在这种情况下会有所帮助。它注册近似（最小）超时（以毫秒为单位，您的情况是 1050），之后将执行指定的函数。最终代码将如下所示：

setTimeout(() => 
  document.querySelectorAll('body').forEach(
    (target) => target.classList.remove('no-scroll')
  );
, 1050);

【参考方案2】：

你可以使用 setTimeout 函数。这里我使用了 5 秒延迟：

setTimeout(function()
 document.querySelectorAll('body').forEach(target => target.classList.remove('no-scroll'));
,5000); 

【讨论】：

感谢您的快速回复，我是否将其放在“其他”部分？

@Daniel 是的。这在 else 块中。

【参考方案3】：

Ann Francis 的代码解决了它！

    <script>
// when DOM is ready
document.addEventListener('DOMContentLoaded', () => 
 // on .nav-menu-button click
 document.querySelectorAll('.nav-menu-button').forEach(trigger => 
  trigger.addEventListener('click', function() 
    this.x = ((this.x || 0) + 1)%2; 
    if(this.x) // 1st click
      document.querySelectorAll('body').forEach(target => target.classList.add('no-scroll'));
    
    else // 2nd click (toggle)
      setTimeout(function()
                 document.querySelectorAll('body').forEach(target => target.classList.remove('no-scroll'));
            ,900); 
     
  );
 );
);
</script>

【讨论】：

对我的回答投赞成票将不胜感激:)

【参考方案4】：

您应该尝试使用.add() 和.remove() 而不是classList.add() 和classList.remove()：

document.querySelectorAll('body').forEach(target => target.remove('no-scroll'));