防抖和节流怎么实现
先理解原理和示例,再练习完整口述与追问。
回答要点
防抖用于一段时间内频繁触发后只处理一次,例如搜索;节流限制连续触发频率,例如滚动处理。编码时要保留 this 和参数,并说清首触发、尾触发、取消和组件销毁清理。
原理拆解
防抖每次事件都重置等待窗口,适合用户停止输入后查询;节流在持续事件期间限定调用频率,适合滚动采样。实现中需要保存最后一组参数与调用者 this,并说明 leading、trailing、cancel 的契约。计时器只是调度工具,不能保证严格的物理时间间隔;后台页面限速也会改变表现。
示例与推演
以 300ms 尾部防抖为例,事件在 0ms、100ms、200ms 到达,执行时间约在最后一次后的 500ms;如果 450ms 又输入,会继续后移到约 750ms。节流若采用首尾调用,则第一次立即处理,窗口内后续只保存最新参数,到窗口尾部补一次。这两种行为必须在代码和测试中保持一致。
易错点
防抖不能防止已经发送请求的旧响应覆盖新响应。组件销毁或条件重置时取消待执行计时器;async 回调的拒绝也要由调用方或封装协议处理。
参考回答可直接练习口述
防抖是在连续触发后等待安静一段时间再执行,典型是搜索;节流是在连续触发期间控制执行频率,典型是滚动处理。实现要保存 timer、最近调用参数和 this,并明确是否首触发、是否保留尾调用。组件卸载时取消未执行回调。搜索即使用了防抖,也可能有已发请求乱序,仍要用取消或请求标识保护结果。完整可运行版本见本文链接的手写题答案。