节流仅用于降低“是否加载”的判断频率,不控制请求本身;需配合loading状态锁防止重复触发,并设置合理阈值(如视口高度+200)提前加载。

节流不是用来直接控制加载请求的,而是把“该不该加载”这个判断动作的执行频率压下来,避免滚动过程中每毫秒都算一遍距离、触发一堆无意义计算。
只节流判断逻辑,不节流请求本身
滚动事件每秒可能触发几十次,如果每次都在里面调用 fetch 或修改 DOM,页面会卡顿、请求会重复。节流应该只包裹轻量的距离判断:
- 用节流函数包裹类似 document.documentElement.scrollHeight - window.scrollY 这样的条件检查
- 节流内部不发请求、不渲染、不改状态,只返回 true/false
- 真正的 loadMore() 必须独立定义,由节流结果 + 状态锁共同决定是否执行
必须配 loading 状态锁,防止重复触发
光靠节流挡不住快速滚动时单次节流窗口内多次满足条件的情况。硬性闸门得靠显式状态控制:
- 声明一个 let loading = false(闭包或模块级变量)
- loadMore() 开头加 if (loading) return
- 发起请求前设 loading = true,请求完成(无论成功失败)再设 loading = false
阈值要留缓冲,别等到真到底部才动
等用户滚到最底再加载,视觉上就是白屏或长时间转圈。提前触发才能平滑衔接:
- 推荐阈值: window.innerHeight + 200(可视区高度 + 缓冲)
- 更灵活的做法:取列表项平均高度 × 2,适配不同卡片结构
- 有吸顶导航栏?记得从 window.scrollY 中减去其高度,否则判断偏移
注意 scrollHeight 的取值对象
别用 document.body.scrollHeight,Safari 下 body.scrollTop 常为 0,会导致判断失效:
- 统一用 document.documentElement.scrollHeight
- 配合 window.scrollY 和 window.innerHeight 计算
- 完整判断式:window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - threshold
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











