Advertisement

debounce & throttle 去疑

阅读量:

debounce 防抖,在一段指定的时间段内且操作未发生任何活动后会自动触发;延时执行如窗口缩放、按键输入及点击等操作会触发延后响应。

通过"掐住"的方式实现节流控制,在特定的时间、频率和周期内完成操作;将高频信号转换成较低频率的信号,并采取间歇式执行的方式(如滚动加载或逐个点击),以防止过快地触发回调机制

上面两句话,可以完全解惑。

这里有一个网络中的 debounce & throttle demo,你可以尝试通过点击鼠标按钮或拖动鼠标来直观地比较两者的功能和性能差异。

下面是 Underscore/Lodash 中的相关详细描述:

debounce

生成一个去抖动的功能...该功能会在等待指定毫秒后自动执行目标函数...此功能配备有取消延迟执行和立即触发的方法...用户可选择是否在等待期的开始或结束时触发目标函数...该功能采用最后提供的参数来执行目标函数...每次调用此去抖动函数都会返回上一次目标函数的执行结果。

实现一个debounce功能模块,在指定时间段延时执行所绑定的func对象。该功能模块配置了一个可取消取消功能(cancel)和一个立即执行重试机制(flush)。此外,请注意该功能模块还支持通过options参数指定如何安排延时事件相对于func调用的时间位置(leading或trailing)。当func被调用时会传递上一次传入的参数值;而对后续多次调用该debounce函数而言,在每次调用返回值中都将包含最新的func执行结果。

函数最后一次调用之后等待一段时间,再次执行函数;

即控制用户操作停止到达一段时间之后再次执行。

……基于行为的不活动,去抖

resize, keyup, click,


throttle

该throttled函数被创建为在每个wait的时间段内最多只会执行一次func,并且它还具备用于取消延迟操作的cancel方法以及立即执行操作的flush方法。此外,该功能还提供了设置选项的能力,以指示func应在wait timeout的时间段前导边、末尾边还是两边均进行操作。需要注意的是,在每次使用throttled函数时都需要提供足够的参数给func,并且在随后再次使用该函数时会立即返回上一次执行的结果。

实现了一个名为_throttled_的功能块,在每隔一段时间内最多只会执行一次指定的操作。
该功能模块具备两个关键属性:一个是用于取消延迟操作的cancel接口;另一个是用于立即执行的操作flush接口。
通过选项设置可以选择在间隔事件发生前或后进行相关操作。
该操作将作为最后一个参数传递给_throttled_功能块。
使用该功能块后将返回所执行操作的结果。

每当重复调用函数时,在特定的时间间隔内(即到达时间间隔),确保在达到该时间间隔后再次执行该函数;管理程序触发频繁程度较高的事件。

……基于时间的频率,节流

scroll, click


[options.leading=true] (boolean): 配置启动前的触发条件。
[options.trailing=true] (boolean): 配置执行后的反馈机制。


Debouncing and Throttling Demystified with Practical Explanations | CSS-Tricks

全部评论 (0)

还没有任何评论哟~