JS滚动加载防重复请求技巧

本文深入解析了JavaScript滚动加载中避免重复请求的核心实践，涵盖触底判断的精准实现（如scrollY + innerHeight ≥ scrollHeight − 100）、isLoading状态锁与hasMore数据标识的协同控制、节流而非防抖的性能优化策略，以及DOM更新后安全重置加载状态的关键细节，同时兼顾兼容性处理、内存泄漏防范和用户体验提升（如加载提示与失败重试），为开发者提供一套健壮、高效且可落地的滚动加载解决方案。

滚动加载的核心是监听滚动事件，判断是否到达页面底部，再触发数据请求；避免重复请求的关键在于设置请求锁和防抖机制。

监听滚动并判断是否触底

通过 window.scrollY（或 document.documentElement.scrollTop）获取当前滚动高度，结合 document.documentElement.scrollHeight 和 window.innerHeight 判断是否接近底部：

• 常用触底阈值：距离底部 100px 内就发起加载，提升用户体验
• 推荐写法：scrollY + innerHeight >= scrollHeight - 100
• 注意兼容性：IE 中需用 document.body.scrollTop 回退

用 loading 状态锁防止重复请求

定义一个布尔变量（如 isLoading），在请求开始前设为 true，成功或失败后重置为 false：

• 每次滚动检测前先检查 if (isLoading || hasMore === false) return
• 请求发起后立即置为 true，避免多次触发同一轮加载
• hasMore 标识是否还有下一页数据，服务端返回空数组或 isLast: true 时设为 false

节流/防抖优化滚动监听

滚动事件高频触发，不加限制会导致频繁判断。推荐使用节流（throttle），每 100~200ms 最多执行一次检测逻辑：

• 可手写简单节流函数，或用 Lodash 的 throttle
• 不必用防抖（debounce），因为“触底”是瞬态动作，延迟响应反而可能漏判
• 在 removeEventListener 前记得清除节流句柄，避免内存泄漏（尤其 SPA 页面切换时）

补充建议：加载完成后再更新状态

确保数据真正追加渲染完毕、DOM 更新完成后，再允许下一次加载判断：

• 如果使用 Vue/React，确保在 nextTick 或 useEffect 后更新 isLoading
• 原生 JS 可用 requestAnimationFrame 或 setTimeout(fn, 0) 延迟重置锁
• 加载中显示 loading 提示，失败时提供重试按钮，提升容错体验

到这里，我们也就讲完了《JS滚动加载防重复请求技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！