如何用jQuery、Ajax和HTML文件实现可控无限滚动并避免重复加载

核心问题分析 #

你当前的代码存在两个关键问题：

• 每次滚动到底都请求同一个固定URL，无法自动切换到下一个HTML文件
• 没有请求锁机制，滚动过程中会重复触发请求，导致内容重复

解决方案代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>Test</main>

<script>
// 初始化状态变量
let currentPage = 1; // 当前已加载的HTML文件序号
const maxLoadTimes = 3; // 最大加载次数，对应你的HTML1/HTML2/HTML3
let isLoading = false; // 请求锁，防止重复触发

// 滚动监听函数
function handleScroll() {
    // 三个判断条件：未在加载、未达到最大次数、滚动到页面底部（加10px偏移兼容浏览器精度）
    if (!isLoading && currentPage < maxLoadTimes && $(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
        isLoading = true; // 上锁，禁止重复请求
        
        // 拼接当前要加载的目标URL
        const targetUrl = `Anywebsite.com/HTML${currentPage + 1}`;
        
        $.ajax({
            url: targetUrl,
            success: function(data) {
                $('main').append(data);
                currentPage++; // 加载成功后更新页码，为下一次请求做准备
            },
            complete: function() {
                isLoading = false; // 请求完成（无论成功/失败）后解锁
                
                // 达到最大加载次数时，移除滚动监听停止触发
                if (currentPage >= maxLoadTimes) {
                    $(window).off("scroll", handleScroll);
                }
            },
            dataType: 'html'
        });
    }
}

// 绑定滚动监听事件
$(window).on("scroll", handleScroll);
</script>

关键细节说明 #

• 状态变量控制：currentPage记录已加载的文件序号，每次加载成功后自增，实现URL自动切换；maxLoadTimes直接设置允许加载的总次数
• 请求锁机制：isLoading变量在请求发起时设为true，请求完成后重置为false，避免滚动过程中重复触发Ajax请求
• 滚动边界兼容：添加-10的偏移量，解决部分浏览器因滚动精度问题导致的触发不灵敏
• 自动停止监听：当达到最大加载次数后，通过off方法移除滚动事件，避免无效监听

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