节流在滚动加载中是为防止高频触发导致重复请求、卡顿和dom抖动,核心是用定时器+isloading锁+提前触底判断(阈值150–250px)确保每次仅执行一次加载。

节流在滚动加载更多中不是为了“减慢滚动”,而是防止滚动事件高频触发导致重复请求、卡顿或 DOM 抖动。关键在于:只在真正需要时检查是否触底,且同一时间最多执行一次加载逻辑。
为什么滚动加载必须加节流
滚动事件在现代浏览器中极易高频触发——惯性滑动、触屏拖拽时每秒可达 50–100 次。不加节流会直接引发:
- 同一位置反复调用 loadMore(),后端收到大量重复请求
- 频繁读取 scrollHeight、scrollTop 等 DOM 属性,阻塞主线程
- 短时间内插入大量节点,触发多次重排重绘,页面明显卡顿
- 组件卸载后监听器未清除,造成内存泄漏风险
推荐用定时器方式实现节流(稳定易懂)
相比时间戳法,定时器方式更直观、容错更强,适合加载场景。核心是“有任务在排队就不新增”:
- 用 throttleTimer 标记当前是否有待执行的检查任务
- 每次滚动只设一次 setTimeout,延迟约 160ms(兼顾响应与性能)
- 进入定时器回调后,才做触底判断和加载动作
必须搭配 isLoading 锁机制
节流只控频率,防重入要靠状态锁。否则快速滚动+网络稍慢,仍可能并发触发多次请求:
- 请求开始前设 isLoading = true
- 无论成功或失败,都需在 .finally() 中恢复 isLoading = false
- 节流函数内部只在 !isLoading 且满足触底条件时才发起加载
触底判断要留出提前量
不能等用户真正滚到最底部才加载,否则会有明显停顿感。建议用“可视区底边 ≥ 文档总高 − 阈值”:
- 阈值一般设 150–250px,适配移动端和 PC
- 计算使用 document.documentElement(避免 body 滚动兼容问题)
- 公式:scrollTop + clientHeight >= scrollHeight - threshold
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











