如何简化为.cat_a和.cat_b实现滚动加载的两段jQuery代码？

嘿，我帮你把这两段重复的代码好好简化优化一下！你现在的逻辑是没问题的，但重复写两遍不仅冗余，以后要改逻辑（比如调整每页加载数量、修改请求参数）的时候得改两处，很麻烦。我们可以把核心逻辑封装成可复用的函数，还能加上一些实用的优化点，比如防止重复请求、滚动防抖。

优化后的完整代码 #

$(document).ready(function() {
    // 封装无限滚动加载的复用函数
    function initInfiniteScroll(category, containerSelector) {
        let offset = 0;
        const limit = 3;
        let isLoading = false; // 防止同一时间多次发起请求

        // 初始加载数据
        loadData();

        // 滚动监听（加防抖，减少事件触发频率）
        $(window).on('scroll', debounce(function() {
            // 判断是否滚动到页面底部
            if ($(window).scrollTop() >= $(document).height() - $(window).height() && !isLoading) {
                loadData();
            }
        }, 200)); // 200ms防抖间隔，可按需调整

        // 实际发起请求加载数据的函数
        function loadData() {
            isLoading = true; // 标记为正在加载
            $.ajax({
                type: 'GET',
                url: 'get_data.php',
                data: {
                    'offset': offset,
                    'limit': limit,
                    'cat': category
                },
                success: function(data) {
                    $(containerSelector).append(data);
                    offset += limit; // 更新偏移量
                    isLoading = false; // 加载完成，解除标记
                },
                error: function() {
                    isLoading = false; // 请求失败也要解除标记，避免后续无法加载
                    console.error(`加载${category}数据失败`);
                }
            });
        }

        // 防抖函数：避免滚动时频繁触发请求
        function debounce(func, delay) {
            let timer;
            return function() {
                clearTimeout(timer);
                timer = setTimeout(func, delay);
            };
        }
    }

    // 分别初始化两个分类的无限滚动
    initInfiniteScroll('cat_a', '.cat_a');
    initInfiniteScroll('cat_b', '.cat_b');
});

优化点说明 #

• 代码复用：把重复的逻辑抽成initInfiniteScroll函数，只需要传入分类名和容器选择器，就能初始化对应模块的滚动加载，以后新增分类也只要调用一次函数就行。
• 防止重复请求：新增isLoading变量，请求发起时标记为true，请求完成（成功/失败）后再改回false，避免滚动到底部时连续触发多个请求。
• 滚动防抖：用debounce函数包装滚动事件，减少滚动过程中事件的触发次数，提升页面性能（不会每滚动1px就触发一次判断）。
• 更清晰的变量命名：把原来的flag改成offset，语义更明确，一看就知道是数据偏移量。
• 错误处理：新增error回调，请求失败时会打印错误信息，同时解除加载标记，不影响后续加载。

这样改完之后，代码更简洁、易维护，还解决了原代码可能存在的重复请求问题~

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