高频事件需节流或防抖控制执行节奏:节流固定周期最多执行一次,适用于滚动吸顶、懒加载等持续反馈场景;防抖仅响应最后一次稳定触发,适用于搜索输入、窗口缩放等需操作结束的场景。

高频事件如 scroll、resize、mousemove 默认可能每秒触发几十甚至上百次,直接在回调中执行 DOM 操作、计算或请求,极易引发卡顿、掉帧甚至主线程阻塞。核心解决思路不是禁用事件,而是控制函数执行的节奏——节流(Throttle)和防抖(Debounce)是最常用且有效的两种手段。
节流:固定周期内最多执行一次
适用于需要持续反馈、但无需每次响应的场景,比如滚动时实时更新吸顶状态、懒加载临界判断、拖拽过程中的位置计算。
- 原理是设定一个时间窗口(如 100ms),首次触发立即执行,之后在窗口期内忽略重复调用,窗口结束后才允许下一次执行
- 可用时间戳或标志位实现,比定时器更精准,避免累积延迟
- 示例:限制滚动监听每 16ms(约 60fps)最多执行一次,匹配浏览器刷新节奏
防抖:只响应最后一次稳定触发
适用于等待用户操作“结束”再处理的场景,比如搜索框输入建议、窗口缩放后重新布局、滚动到底部加载更多(需确认用户真正停下了)。
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 每次触发都重置计时器,仅当事件完全静默满指定延迟(如 300ms)后才执行函数
- 依赖
setTimeout和clearTimeout,闭包保存定时器 ID 是关键 - 注意:若用户持续快速滚动,防抖会导致函数一直不执行,此时应选节流而非防抖
结合事件委托与 passive 选项进一步提效
原生事件本身也有优化空间,不单靠 JS 逻辑控制。
- 对大量子元素的交互(如列表项点击),用事件委托绑定到父容器,减少监听器数量
- 为
scroll、touchstart等事件添加{ passive: true }选项,告诉浏览器该回调不会调用preventDefault(),从而启用异步滚动,极大提升滑动流畅度 - 示例:
window.addEventListener('scroll', handler, { passive: true })
实际使用建议
别从零手写,优先使用成熟方案,同时关注业务语义。
- Lodash 的
_.throttle和_.debounce支持取消、最大延迟、leading/trailing 等配置,工程中更稳健 - 现代框架(如 React)可配合
useCallback+ 自定义 Hook 封装,避免因函数引用变化导致重复绑定 - 真正高频场景(如实时绘图、游戏)可考虑
requestAnimationFrame替代节流,让执行时机与屏幕刷新严格对齐
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










