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

【问题标题】：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{}。

标签： javascript html css animation interaction

【解决方案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'));

【讨论】：