如何在scroll事件结束后调用函数，实现滚动亮灯、停止熄灯

你当前的代码问题很明显——在scroll事件回调里，刚给body加上on类就立刻移除了，相当于没加过，所以灯泡完全不会亮。

要实现滚动时点亮、停止滚动后熄灭的效果，核心思路是用定时器来延迟执行熄灭操作，具体代码如下：

// 声明一个变量保存定时器ID
let scrollTimer;

document.addEventListener('scroll', () => {
  // 清除之前的定时器，避免滚动过程中误触发熄灭
  clearTimeout(scrollTimer);
  // 点亮灯泡：添加on类
  document.body.classList.add('on');
  
  // 设置定时器，停止滚动300ms后执行熄灭
  scrollTimer = setTimeout(() => {
    document.body.classList.remove('on');
  }, 300);
});

逻辑说明 #

• 每次触发滚动事件时，先清除之前的定时器——确保只要用户还在滚动，就不会执行熄灭操作；
• 立即给body添加on类，让灯泡点亮；
• 重新设置一个定时器：如果接下来300ms内没有新的滚动事件触发，定时器就会执行，移除on类让灯泡熄灭。这个延迟时间可以根据你的需求调整，比如改成200ms（更灵敏）或500ms（更宽松）。

另外要确认你的CSS中，.on类已经正确绑定了灯泡点亮的样式（比如切换灯泡图片、调整透明度等），这样类的添加/移除才能真正让灯泡呈现亮/灭的状态。

内容的提问来源于stack exchange，提问作者Alin-Alexandru Peter