如何让$(window).scroll内多条件分支的回调函数每个仅触发一次

你遇到的核心问题是单个布尔标记只能记录全局触发状态，无法区分不同的滚动区间，也没法感知区间切换的动作，我们可以通过记录上一次激活的区间ID来实现需求，同时还能优化滚动性能：

核心实现代码 #

// 记录上一次激活的区间，初始为空
let lastActiveSection = null;
// 提前缓存元素位置，避免每次滚动都查询DOM提升性能
const section1Top = $('.element').offset().top;
const section2Top = $('.element2').offset().top;

$(window).scroll(function(){
    const windowTop = $(window).scrollTop();
    let currentSection = null;

    // 判断当前所属区间
    if (windowTop > section1Top && windowTop < section2Top) {
        currentSection = 'section1';
    } else if (windowTop > section2Top) {
        currentSection = 'section2';
    }

    // 仅当区间发生切换时才执行对应回调
    if (currentSection && currentSection !== lastActiveSection) {
        // 不同区间需要执行不同逻辑可在此处加分支判断
        doSomething();
        // 更新上次激活区间为当前区间
        lastActiveSection = currentSection;
    }
});

可选优化：添加滚动节流 #

滚动事件触发频率非常高，可添加节流逻辑控制回调触发频率，降低性能消耗：

let lastActiveSection = null;
const section1Top = $('.element').offset().top;
const section2Top = $('.element2').offset().top;
// 节流定时器
let scrollThrottleTimer = null;

$(window).scroll(function(){
    // 200ms内仅触发一次，可根据需求调整间隔时长
    if (scrollThrottleTimer) return;
    scrollThrottleTimer = setTimeout(() => {
        const windowTop = $(window).scrollTop();
        let currentSection = null;

        if (windowTop > section1Top && windowTop < section2Top) {
            currentSection = 'section1';
        } else if (windowTop > section2Top) {
            currentSection = 'section2';
        }

        if (currentSection && currentSection !== lastActiveSection) {
            doSomething();
            lastActiveSection = currentSection;
        }
        scrollThrottleTimer = null;
    }, 200);
});

扩展说明 #

如果后续需要新增更多滚动区间，只需要在区间判断分支中新增对应规则，给每个区间分配唯一ID即可，不需要额外新增标记变量，扩展性更强。如果需要支持向上滚动时也能触发对应区间的回调，该方案也天然支持，不需要额外修改逻辑。

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