团队统一使用函数式、无副作用、可取消、支持this与参数透传的防抖/节流实现;禁止内联箭头函数,须显式声明定时器变量并提供cancel方法;命名小驼峰,参数顺序固定为(fn, wait, options?);防抖用于搜索、校验、resize,节流用于scroll、mousemove、拖拽;React用useCallback缓存,Vue在setup中定义并onBeforeUnmount调用cancel;原生DOM需先解绑或用AbortController;生产环境必加isPending()、cancel兜底置空、多参数兼容;CR重点查cancel遗漏、防抖误用于滚动加载、this绑定错误及wait值合理性。

防抖与节流的编码规范
团队内统一使用函数式、无副作用、可取消、支持 this 与参数透传的实现方式。禁止直接在事件回调中内联箭头函数(如 debounce(() => handler(), 300)),因其会丢失 event 参数且无法正确绑定上下文。
必须显式声明定时器引用变量(如 let timeout = null),不可依赖闭包外全局状态;所有防抖/节流函数返回的新函数需提供 cancel() 方法,便于组件卸载时清理资源。
命名统一采用小驼峰:防抖用 debounce,节流用 throttle;参数顺序固定为 (fn, wait, options?),其中 options 仅在需要扩展行为(如 immediate、leading、trailing)时引入,避免过度设计。
团队开发中的使用约束
防抖只用于「等待用户操作结束」的场景:搜索输入、表单校验、resize 布局重算。节流只用于「保持稳定响应节奏」的场景:scroll 滚动监听、mousemove 位置追踪、拖拽反馈。
禁止在 React useEffect 或 Vue onMounted 中直接调用防抖/节流函数而不保存引用——每次渲染都新建防抖函数会导致事件监听器重复绑定或失效。应提前定义并缓存:
- React:用 useCallback 包裹防抖后函数,并将依赖项列全
- Vue:在 setup 中定义一次,通过 onBeforeUnmount 调用 cancel
- 原生 DOM:绑定前先解绑旧监听器,或使用 AbortController.signal 配合现代事件监听
生产环境必备增强项
基础版本满足功能,但上线前必须加入三项稳定性保障:
- 执行状态监控:暴露 isPending() 方法,便于调试或禁用交互(如提交按钮置灰期间阻止重复点击)
- 定时器清除兜底:在 cancel 中除 clearTimeout 外,同步置空 timeout 引用,防止内存泄漏或误触发
- 参数兼容性处理:支持单参数(event)、多参数(...args)及无参调用,内部统一用 func.apply(this, args || [])
代码审查重点检查项
Code Review 时需逐条确认:
- 是否遗漏 cancel 调用?尤其在组件销毁、路由跳转、Modal 关闭等生命周期节点
- 是否错误地将防抖用于滚动加载?该场景必须用节流或 IntersectionObserver 替代
- 是否在防抖函数中修改了原始 fn 的 this 绑定逻辑?应由调用方用 bind 或箭头函数封装,而非在 debounce 内部硬编码
- wait 值是否合理?输入类建议 200–400ms,resize 建议 ≥100ms,scroll/mousemove 建议 16–60ms(匹配帧率)











