jQuery scroll滚动事件多次触发：滚动到页脚加载内容重复如何解决

核心问题分析 #

你遇到的重复触发问题来自三个错误点：

• 判定逻辑错误：原代码使用$('#footer').height()取页脚自身高度，并不是页脚顶部距离文档顶部的位置，阈值计算完全错误
• 缺少加载状态锁：scroll事件每秒触发数十次，只要阈值条件满足就会反复执行load_posts()
• 额外语法问题：代码中使用了中文单引号‘’，会导致jQuery选择器报错，需要替换为英文单引号''

修复方案 #

方案1：状态锁+加载完成解锁（最稳妥） #

通过一个全局状态变量控制同一时间只有一个加载请求在执行，加载完成后自动解锁，支持后续滚动加载下一批内容。

// 全局加载状态锁，初始为未加载状态
let isLoading = false;

$(window).on('scroll', function () {
    // 只有未在加载时才执行判断
    if (!isLoading) {
        // 正确判定：滚动条位置+视口高度 >= 页脚顶部距离文档顶部的位置 - 100px
        const scrollBottom = $(window).scrollTop() + $(window).height();
        const footerTop = $('#footer').offset().top;
        if (scrollBottom >= footerTop - 100) {
            // 执行加载前先上锁
            isLoading = true;
            load_posts();
        }
    }
});

// 你的load_posts函数改造，异步加载完成后解锁
function load_posts() {
    // 你的加载逻辑，比如AJAX请求
    $.ajax({
        url: '你的加载接口地址',
        type: 'get',
        success: function(res) {
            // 渲染新加载的内容逻辑
        },
        complete: function() {
            // 请求无论成功失败，最后都解锁，允许下一次加载
            isLoading = false;
        }
    })
}

方案2：增加超时兜底机制 #

如果担心请求失败导致锁一直处于锁定状态，可以加超时兜底，超时后自动解锁：

let isLoading = false;

$(window).on('scroll', function () {
    if (!isLoading) {
        const scrollBottom = $(window).scrollTop() + $(window).height();
        const footerTop = $('#footer').offset().top;
        if (scrollBottom >= footerTop - 100) {
            isLoading = true;
            load_posts();
            // 10秒超时兜底，无论加载是否完成都解锁，可自行调整时长
            setTimeout(() => {
                isLoading = false;
            }, 10000)
        }
    }
});

可选优化：添加滚动防抖 #

减少scroll事件的触发频率，降低性能消耗：

let isLoading = false;
let scrollTimer = null;

$(window).on('scroll', function () {
    // 300ms内只判断一次，可自行调整时长
    clearTimeout(scrollTimer);
    scrollTimer = setTimeout(() => {
        if (!isLoading) {
            const scrollBottom = $(window).scrollTop() + $(window).height();
            const footerTop = $('#footer').offset().top;
            if (scrollBottom >= footerTop - 100) {
                isLoading = true;
                load_posts();
            }
        }
    }, 300)
});

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