setInterval在onScroll滚动事件中运行异常，current类随机添加如何解决

问题原因 #

• scroll 事件会在页面滚动过程中高频触发，每一次满足滚动距离判定条件时，都会重新创建一个 setInterval 定时器，多个定时器同时运行会叠加执行逻辑，最终导致 current 类添加混乱。
• 即使滚动到目标区域后继续滚动，也会不断生成新的定时器，放大异常问题。

修复方案 #

新增一个变量存储定时器ID，确保全局只会存在一个生效的定时器，满足条件时仅初始化一次定时器，离开目标区域时销毁定时器即可。原有的CSS、HTML代码无需调整，仅替换JS逻辑即可正常运行。

修复后的JS代码 #

// 存储定时器ID
let lightBoxTimer = null;

function lightBoxNavAddClass() {
  var current = $('.light-box-nav li.current').removeClass('current'),
    next = current.next().length ? current.next() : current.siblings().filter(':first');
  next.addClass('current');
};

$(document).on('scroll', function() {
  const scrollTop = $(this).scrollTop();
  const targetTop = $('.hccb-lightbox').position().top;
  
  if (scrollTop >= targetTop) {
    // 仅当定时器未启动时才创建，避免重复生成
    if (!lightBoxTimer) {
      console.log('I have been reached');
      lightBoxTimer = setInterval(function() {
        lightBoxNavAddClass();
        // 放开注释即可触发对应a标签的点击事件
        // $('.light-box-nav li.current a').trigger('click');
      }, 3000);
    }
  } else {
    // 离开目标区域时销毁定时器，重置标记
    if (lightBoxTimer) {
      clearInterval(lightBoxTimer);
      lightBoxTimer = null;
    }
  }
})

可选优化 #

如果需要滚动到目标区域就立刻执行一次切换逻辑，无需等待第一个3秒间隔，可以在创建定时器的同时，主动调用一次 lightBoxNavAddClass()。

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