点击导航关闭按钮后如何延迟移除body的no-scroll类？

你可以通过JS内置的setTimeout方法实现延迟执行移除类的操作，同时补充定时器清除逻辑避免用户快速反复点击时的逻辑冲突，修改后的完整代码如下：

document.addEventListener('DOMContentLoaded', () => {
  // 导航菜单按钮点击事件
  document.querySelectorAll('.nav-menu-button').forEach(trigger => {
    trigger.addEventListener('click', function(){ 
      // 清除未执行的定时器，避免快速点击出现逻辑异常
      clearTimeout(this.timer);
      this.x = ((this.x || 0) + 1) % 2; 
      if(this.x){ // 第一次点击：打开导航
        document.body.classList.add('no-scroll');
      }
      else{ // 第二次点击：关闭导航
        // 延迟1050ms移除类，匹配导航关闭动画时长
        this.timer = setTimeout(() => {
          document.body.classList.remove('no-scroll');
        }, 1050);
      } 
    });
  });
});

改动说明 #

• 新增了定时器绑定与清除逻辑，避免用户在延迟周期内反复点击导航按钮，出现导航仍在开启状态、但no-scroll类被提前移除的问题
• 将移除no-scroll类的操作放入setTimeout中，设置1050ms的延迟，和你提到的导航完全关闭所需的1.05秒完全匹配
• 简化了body元素的选择逻辑：由于页面中body元素唯一，不需要用querySelectorAll遍历，直接调用document.body操作类即可

内容的提问来源于stack exchange，提问作者Daniel