140个AJAX请求致浏览器冻结，如何实现分批加载+滚动触加载？

我来帮你完善这个分批加载功能，解决大量请求导致浏览器冻结的问题。核心思路是控制每批请求数量（10个），同时给滚动事件加状态锁避免重复触发，还要精准管理请求发送进度。

完整代码实现 #

// 配置参数
const totalRequests = 140; // 总请求数量（根据实际情况调整）
const batchSize = 10; // 每批加载的请求数
let requestsSent = 0; // 已经发送的请求数
let isLoading = false; // 标记是否正在加载，防止重复触发

// 封装单个AJAX请求的逻辑
function sendAjaxRequest(searchWord, duck) {
    const url = `https://xxxxxxx.com/search?name=${searchWord}&xxxs=${duck}&format=application/json`;
    return jQuery.ajax({
        url: url,
        beforeSend: function() { 
            // 注意：如果多请求同时发起，单个loading会频繁闪显，建议改成全局底部加载提示
            jQuery('#image').show(); 
        },
        complete: function() { 
            jQuery('#image').hide(); 
        },
        dataType: "text",
        success: function(data) {
            // 这里替换成你实际的成功处理逻辑，比如渲染数据到页面
            console.log('请求成功，返回数据:', data);
        },
        error: function(xhr, status, error) {
            // 处理请求失败的场景
            console.error('请求失败:', error);
        }
    });
}

// 加载一批请求（10个）
function loadBatch(searchWord, duck) {
    // 终止条件：已发完所有请求 或 正在加载中
    if (requestsSent >= totalRequests || isLoading) return;
    
    isLoading = true;
    const currentBatchPromises = [];
    
    // 发送当前批次的请求
    for (let i = 0; i < batchSize && requestsSent < totalRequests; i++) {
        currentBatchPromises.push(sendAjaxRequest(searchWord, duck));
        requestsSent++;
    }
    
    // 等当前批次所有请求完成后，解除加载锁
    Promise.all(currentBatchPromises).then(() => {
        isLoading = false;
        console.log(`当前批次加载完成，累计已发送${requestsSent}个请求`);
    }).catch(() => {
        isLoading = false;
        console.log(`当前批次有请求失败，累计已发送${requestsSent}个请求`);
    });
}

// 初始化加载第一批请求（替换成你的实际参数）
const searchWord = '你的搜索关键词';
const duck = '你的duck参数';
loadBatch(searchWord, duck);

// 滚动触底事件（提前100px触发，提升用户体验）
$(window).scroll(function() {
    const isNearBottom = $(window).scrollTop() + $(window).height() >= $(document).height() - 100;
    if (isNearBottom) {
        loadBatch(searchWord, duck);
    }
});

关键细节说明 #

• 加载状态锁isLoading：彻底避免滚动时连续触发多次加载，防止同一时间发起过量请求拖垮浏览器。
• 请求进度管理：用requestsSent记录已发送请求数，确保不会超过总请求上限。
• 批次请求聚合：通过Promise.all等待当前批次所有请求完成后再解锁，也可以根据需求去掉这一步（直接发送下一批，不等待上一批完成）。
• 滚动触发优化：把触底判断提前100px，让用户在快到底部时就开始加载，避免等待空白期。

额外优化建议 #

• 防抖处理：如果滚动事件触发太频繁，可以给滚动事件加防抖（比如延迟200ms再判断触底），减少不必要的函数调用。
• 全局加载提示：把单个请求的loading改成页面底部的"加载中..."提示，避免频繁闪显。
• 失败重试：对失败的请求添加重试逻辑，比如失败后自动重试1-2次，提升数据完整性。

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