滚动加载核心是监听滚动事件并判断是否触底（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 最多执行一次检测逻辑：
立即学习“Java免费学习笔记（深入）”；
- 可手写简单节流函数，或用 Lodash 的 throttle
- 不必用防抖（debounce），因为“触底”是瞬态动作，延迟响应反而可能漏判
- 在 removeEventListener 前记得清除节流句柄，避免内存泄漏（尤其 SPA 页面切换时）
补充建议：加载完成后再更新状态
确保数据真正追加渲染完毕、DOM 更新完成后，再允许下一次加载判断：
- 如果使用 Vue/React，确保在 nextTick 或 useEffect 后更新 isLoading
- 原生 JS 可用 requestAnimationFrame 或 setTimeout(fn, 0) 延迟重置锁
- 加载中显示 loading 提示，失败时提供重试按钮，提升容错体验
