CodeIgniter中数据加载完毕后停止无限滚动的解决方案求助

你的代码已经具备了加载更多的基础逻辑，但缺少内容加载完成后停止触发加载的判断和事件清理处理，这正是导致异常触发的核心原因。我来帮你一步步修复这个问题：

问题分析 #

1. 你的滚动事件处理函数是空的（$(window).scroll(function() { });），如果是想实现滚动触发加载，这里需要补充对应逻辑；
2. 当total_record达到total_groups后，没有禁用加载按钮或移除触发事件，导致还能继续调用加载逻辑；
3. 没有处理后端返回空数据的极端情况（比如没有更多内容时返回空，此时也应该停止加载）。

修复后的完整代码 #

$(document).ready(function() {
    var total_record = 0;
    var total_groups = <?php echo $total_data; ?>;
    var isLoading = false; // 防止重复触发加载的锁机制

    // 初始加载第一组数据
    $('#results').load("<?php echo base_url() ?>admin/csr_transactions/get_products", {'group_no':total_record}, function() {
        total_record++;
    });

    // 可选：滚动到底部自动加载（需要的话取消注释）
    /*
    $(window).scroll(function() {
        // 判断是否滚动到接近底部、不在加载中、还有更多数据
        if($(window).scrollTop() + $(window).height() >= $(document).height() - 100 
           && !isLoading 
           && total_record < total_groups) {
            load_more();
        }
    });
    */

    // 点击加载更多按钮触发
    $('#load_more').click(function(){
        load_more();
    });

    function load_more() {
        // 终止条件：正在加载或已无更多数据，直接返回
        if(isLoading || total_record >= total_groups) {
            return;
        }

        isLoading = true;
        $('.loader_image').show();

        $.post("<?php echo site_url() ?>admin/csr_transactions/get_products", {'group_no': total_record}, function(data) {
            $('.loader_image').hide();
            
            if (data.trim() != "") {
                $("#results").append(data);
                total_record++;
            } else {
                // 后端返回空数据，标记为已无更多内容
                total_record = total_groups;
            }

            // 检查是否加载完成，完成则清理事件
            if(total_record >= total_groups) {
                $('#load_more').hide().off('click'); // 隐藏按钮并移除点击事件
                $(window).off('scroll'); // 如果用了滚动触发，也移除滚动事件
            }

            isLoading = false;
        });
    }
});

关键修改点说明 #

• 添加isLoading锁：防止用户快速点击或滚动时重复发送请求，避免多次加载同一组数据；
• 完善终止判断：当total_record >= total_groups时，直接终止加载逻辑；
• 处理空数据场景：后端返回空字符串时，直接标记为加载完成；
• 加载完成后清理事件：隐藏加载按钮并移除点击/滚动事件，彻底阻止后续异常触发；
• 可选滚动触发逻辑：如果需要实现滚动到底部自动加载，取消注释对应的滚动事件代码即可。

这样修改后，当所有内容加载完成后，加载按钮会被隐藏，滚动/点击事件也会被移除，就不会再出现持续触发滚动的异常行为了。

内容的提问来源于stack exchange，提问作者Vania Lyn Bagsawan