滚动事件高频触发易导致卡顿,防抖适用于停后响应(如触底加载),节流适用于过程控制(如进度条、吸顶),视差效果优先用requestAnimationFrame。

滚动事件(scroll)是典型的高频触发事件——用户轻轻一滑,浏览器可能在几十毫秒内触发十几次。若每次触发都执行 DOM 操作、计算位置或发请求,主线程立刻过载,页面卡顿、掉帧、响应延迟就随之而来。防抖和节流都能缓解,但用法截然不同:防抖适合“等停再判”,节流适合“边滚边控”。
防抖处理滚动事件:适用于“停止后才响应”的场景
比如判断用户是否已滚动到页面底部、触底加载更多数据。你并不关心滚动过程中的中间状态,只关心“他停下来了,且此刻在底部”。这时用防抖最自然。
- 每次滚动都清除上一个定时器,重新计时;只有连续滚动完全停止、且等待时间(如 200ms)过后,才执行一次检测逻辑
- 代码里需注意:避免在防抖函数中直接读取
window.scrollY等实时值——因为执行时滚动可能已结束,值是准确的;但若依赖event对象,它在防抖回调中已失效,应提前缓存 - 示例逻辑:用户快速滚到底部 → 中途多次触发 → 全部被取消 → 停止 200ms 后检查 scrollY + clientHeight 是否 ≥ document.body.scrollHeight → 执行加载
节流处理滚动事件:适用于“过程中需定期响应”的场景
比如实现视差滚动、滚动进度条、吸顶导航、实时监听滚动位置做动画联动。这些需要持续感知滚动节奏,不能等到停了才动。
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
- 常用时间戳版:记录上一次执行时间,当前时间减去它 ≥ 设定间隔(如 16ms 或 100ms),才允许执行;首次触发立即执行
- 更稳的定时器版:用标志位 + setTimeout,确保即使滚动极快,也能在固定节奏下兜底执行一次(避免最后一次滚动被漏掉)
- 注意:不要把节流和
requestAnimationFrame混用——后者本身已是每帧一次的最优节奏;若需视觉平滑,优先用 rAF 替代节流
实际选哪个?关键看业务要的是“结果”还是“过程”
防抖输出的是稳定终态,节流输出的是可控节奏。滚动加载更多 → 防抖;滚动吸顶 + 进度条 → 节流;视差效果 → 推荐 requestAnimationFrame;而如果只是防止卡顿又没具体交互需求,节流 100ms 是安全起点。
立即学习“Java免费学习笔记(深入)”;
两者都不是万能解药:先确保你的滚动回调本身足够轻量——避免频繁 DOM 查询、减少重排重绘、用 getBoundingClientRect() 替代 offsetTop 等同步计算。

















