PHP社交站点AJAX无限滚动问题：重复加载、页码未更新求助

你的问题核心是滚动事件频繁触发导致并发AJAX请求，不需要加延迟，而是通过请求锁+修复逻辑错误来解决，具体方案如下：

关键问题分析 #

1. 滚动事件会连续触发，当前请求还未完成、页码还未更新时，新的请求已经发起，导致重复加载同一页内容
2. 原代码中滚动触发的条件逻辑错误：用了||（或），应该用&&（且），否则会在还有更多帖子时就重复触发请求

解决方案 #

1. 添加请求锁变量 #

全局声明一个标记变量，用来标记当前是否有AJAX请求在进行，避免并发请求。

2. 修复触发条件逻辑 #

将滚动触发条件中的||改为&&，确保只有滚动到底部 且 还有更多帖子时才发起请求。

3. 优化后的完整代码 #

<script>
    var userLoggedIn = '<?php echo $userLoggedIn; ?>';
    var isLoading = false; // 请求锁标记

    $(document).ready(function() {

        $('#loading').show();

        // 初始加载第一页帖子
        $.ajax({
            url: "includes/handlers/ajax_load_posts.php",
            type: "POST",
            data: "page=1&userLoggedIn=" + userLoggedIn,
            cache: false,

            success: function(data) {
                $('#loading').hide();
                $('.posts_area').html(data);
            }
        });


        $(window).scroll(function() {
            // 如果正在加载，直接返回，避免并发请求
            if (isLoading) return;

            var page = $('.posts_area').find('.nextPage').val();
            var noMorePosts = $('.posts_area').find('.noMorePosts').val();

            // 修复逻辑：滚动到底部 且 还有更多帖子时才请求
            if ((document.body.scrollHeight == document.body.scrollTop + window.innerHeight) && noMorePosts != 'true') {
                isLoading = true; // 标记为正在加载
                $('#loading').show();

                $.ajax({
                    url: "includes/handlers/ajax_load_posts.php",
                    type: "POST",
                    data: "page=" + page + "&userLoggedIn=" + userLoggedIn,
                    cache: false,

                    success: function(response) {
                        $('.posts_area').find('.nextPage').remove();
                        $('.posts_area').find('.noMorePosts').remove();

                        $('#loading').hide();
                        $('.posts_area').append(response);
                    },
                    // 请求完成（成功/失败）后重置加载标记
                    complete: function() {
                        isLoading = false;
                    }
                });

            }

            return false;

        });

    });
</script>

核心修改说明 #

• 新增isLoading变量，请求开始时设为true，请求完成后重置为false，彻底避免并发请求
• 修复滚动触发条件的逻辑运算符，从||改为&&，确保触发时机正确
• 新增AJAX请求的complete回调，不管请求成功还是失败，都能解锁请求锁，避免页面陷入无法加载的状态

内容的提问来源于stack exchange，提问作者Lynn Aung Kyaw