防抖与节流模式(Debounce and Throttle)

防抖与节流模式(Debounce and Throttle)是两种限制函数被高频调用的常用技术,防抖会推迟执行直到事件不再连续触发,节流则以固定的时间窗口限制执行频率,二者都用于避免在密集事件下反复执行开销较大的操作。

概述

在前端和实时系统中,滚动、输入、窗口缩放等事件可能在极短时间内触发成百上千次。若每次都执行搜索请求、重排布局等昂贵操作,会造成卡顿和资源浪费。防抖与节流通过对触发时机加以控制,把海量事件收敛为可控的少量执行。

核心原理

• 防抖:每次触发都重置计时器,只有在停止触发并经过设定延迟后才执行一次。
• 节流:在设定的时间窗口内无论触发多少次,都至多执行一次。
• 防抖关注等待安静,节流关注控制节奏。
• 两者都通过闭包保存定时器或时间戳等状态。

应用场景

防抖常用于搜索框自动补全,等用户停止输入再发请求;也用于窗口缩放后重新计算布局。节流常用于滚动加载、拖拽、鼠标移动等需要持续但不必过密响应的场景。许多工具库都内置了这两个函数的通用实现。

常见问题

问:防抖和节流该如何选择?答:如果只关心最终稳定状态,比如输入完成后再搜索,用防抖;如果希望过程中也定期得到反馈,比如滚动时匀速更新,用节流。判断依据是需要最后一次还是需要过程中的均匀执行。

问:防抖会不会导致操作永远不执行?答:若事件持续不断触发且间隔小于延迟,防抖确实可能迟迟不执行。为此可以设置最长等待时间,强制在超过阈值后至少执行一次。