滚动加载MySQL数据时AJAX重复追加相同数据问题求助

嘿，这个重复加载的问题我之前也碰到过，核心原因是滚动事件会被频繁触发——当你的加载器还在请求数据的过程中，用户继续滚动页面，你的代码会再次触发AJAX请求，最终导致相同的数据被多次追加到页面上。咱们来一步步修复这个问题：

核心解决方案：添加加载锁+防抖优化 #

1. 引入加载状态锁 #

定义一个全局变量来标记当前是否正在加载数据，在请求发起前检查这个状态，只有当未加载时才允许发起新请求，避免重复调用AJAX。

2. 优化滚动事件的防抖 #

滚动事件会在用户滚动的过程中持续触发，我们可以用防抖函数来减少不必要的触发次数，避免短时间内多次执行判断逻辑。

修改后的完整代码 #

$(document).ready(function(){
    // 定义加载锁，初始为未加载状态
    let isLoading = false;
    // 防抖定时器ID
    let scrollTimer;

    $(window).scroll(function(){
        // 清除之前的防抖定时器
        clearTimeout(scrollTimer);
        // 延迟300ms执行判断逻辑，避免频繁触发
        scrollTimer = setTimeout(function(){
            var lastID = $('.load-more').attr('lastID');
            // 只有当未加载、滚动到底部且lastID不为0时才发起请求
            if(($(window).scrollTop() == $(document).height() - $(window).height()) && (lastID != 0) && !isLoading){
                // 标记为正在加载
                isLoading = true;
                $.ajax({
                    type:'POST',
                    url:'result_data.php',
                    data:'id='+lastID,
                    beforeSend:function(){
                        $('.load-more').show();
                    },
                    success:function(response){
                        setTimeout(function() {
                            $('.load-more').remove();
                            $('#postList').append(response);
                            // 请求完成后，重置加载锁
                            isLoading = false;
                        }, 400);
                    },
                    // 别忘了处理请求失败的情况，也要重置加载锁
                    error:function(){
                        isLoading = false;
                        $('.load-more').hide();
                        // 可以在这里提示用户加载失败
                    }
                });
            }
        }, 300);
    });
});

关键修改点说明 #

• 加载锁isLoading：在发起AJAX请求前将其设为true，请求完成（无论成功还是失败）后重置为false，确保同一时间只有一个请求在运行。
• 防抖处理：通过setTimeout延迟执行滚动判断逻辑，避免用户滚动过程中频繁触发请求，300ms的延迟可以根据实际需求调整。
• 错误处理：添加error回调，在请求失败时也重置加载锁，避免后续无法发起新的请求。

另外，你还可以在后端的result_data.php中做一层校验，比如根据lastID返回数据时，确保每次返回的都是最新的、未重复的数据，这样即使前端偶尔触发重复请求，后端也能过滤掉重复的内容，双重保障。

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