Ajax滚动加载更多功能中setInterval定时拉取数据异常如何解决

核心错误点 #

• 变量作用域错误：limit、start、action三个变量都定义在$(document).ready的闭包内部，你写的setInterval放在闭包外的话，根本访问不到这几个变量，会直接抛出未定义异常。同时你在定时器回调里重新声明了局部的limit和start，每次调用都强制start=0，直接覆盖了滚动加载积累的分页参数，导致拉取的数据直接替换之前的分页内容，出现展示混乱。
• 逻辑判断冗余错误：你在定时器里加了滚动触底的判断，只有用户滑到页面底部时定时逻辑才会执行，完全不符合你要自动拉取数据的需求。
• 并发请求冲突：如果前一次Ajax请求还没返回，下一次定时/滚动触发的请求又被发出，多个请求并行返回的顺序不可控，会出现内容互相覆盖、随机显示的问题。
• 渲染逻辑冲突：原load_data函数里每次拉取成功都会清空整个列表容器再追加新内容，如果定时拉取和滚动加载同时触发，会直接打乱用户已经加载出来的分页内容。

修复方法 #

1. 将定时器逻辑移到$(document).ready闭包内部，和滚动事件同级，不要重新声明已有的limit、start、action变量。
2. 移除不必要的滚动位置判断，只保留请求状态校验，避免重复发请求。
3. 如果你要实现的是自动刷新最新全量数据，可以直接用下面的代码；如果你要实现的是自动加载下一页分页数据，就和滚动逻辑一样加start = start + limit的逻辑即可。

修改后的定时器代码：

// 放到$(document.ready)闭包的最后，和滚动监听事件同级
window.setInterval(function(){
    // 仅当前无正在处理的请求时才触发拉取
    if(action == 'inactive') {
        action = 'active';
        // 刷新最新数据传start=0，要自动加载下一页就先执行start = start + limit再传参
        load_data(limit, 0);
    } 
}, 10000);

可选优化 #

如果不需要全量刷新覆盖现有内容，只想增量追加最新数据，可以调整接口返回最新记录的唯一ID，前端对比本地已有数据的最大ID，只拉取ID更大的新数据追加到列表顶部，不会影响用户已经浏览的内容。同时可以给Ajax请求加取消逻辑，每次触发新请求时终止上一次未完成的请求，彻底避免并发冲突。

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