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

我的网站上有完整的页面导航。为了确保打开导航时页面无法滚动，正文采用隐藏溢出的“无滚动”类。当导航打开时，这也会删除滚动条。

当再次按下导航按钮并且导航关闭时，类“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>

提前致谢！

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

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