节流和去抖动功能

Posted 2023-02-22

【中文标题】节流和去抖动功能

【英文标题】：Throttle & debounce functions

【发布时间】：2015-07-25 05:04:02

【问题描述】：

我对的概念有点不确定。

据我所知：

我们 debounce 一个应该在特定事件发生后调用的函数。它用于诸如拖动、keyup 等事件，目的不是在事件被触发时一直触发，而是在一系列事件完成时触发。通常在输入整个单词之后，或者拖动或调整大小序列结束之后。

我们限制一个函数，它应该在一系列事件发生时触发，但是当我们想要控制它被调用的次数时。就像在拖动运动中一样，我们希望函数仅在每 x 个距离像素或每 100 毫秒调用一次，而不是在每次触发事件时调用。因此，节流函数在一系列事件发生时被调用，只是次数更少。

问题：

这是对这些功能及其用途的正确认识吗？还有其他区别它们的特征吗？

【问题讨论】：

Ben Alman's post on throttle vs debounce has some useful visualizations.

@zzzzBov 有趣的阅读。谢谢。

Difference Between throttling and debouncing a function的可能重复

【参考方案1】：

是的，这是一个很好的差异概要。

但是，您可能需要强调这些方法实际上并没有改变它们被调用的函数。他们只是创建一个新函数（具有一个标识，速率限制行为绑定到该函数），该函数可以根据需要经常调用，并在内部将调用中继到去抖动或节流函数。

【讨论】：

谢谢伯吉。是否有一个隐含的规则/约定应该将函数的范围传递给去抖动或节流函数？

“范围”是什么意思？ debounced/throttled 的范围被隐式传递给那些函数（但不能被访问），因为它是由闭包绑定的。

我的意思是像in the underscore debounce function，当函数最终被调用时，有一个context被传入.apply(context, arguments)。作为一种约定/规则，人们是否应该期望去抖动功能？

不，这只是一个方便的参数（他们还是使用了apply），而不是限制/去抖动行为所固有的。你也可以在节流/去抖动函数上使用.bind()，我敢肯定，使用 ES6 箭头函数，我们会看到这样的事情更少。但你是对的，这是一个 underscorejs 约定，所有回调函数也采用 this 上下文。

【参考方案2】：

简称：

throttle 设计用于在恒定调用期间以一定的间隔调用函数。 比如：window.scroll。 debounce 被设计为在特定时间内只调用一次函数。不管它调用了多少次。 喜欢：提交按钮点击。 示例如下：

//http://jsfiddle.net/1dr00xbn/

你可以看到区别。

【讨论】：

这个很短，很清楚易懂。

【参考方案3】：

正如我今天的 TL 指出的，值得一提的是，在 lodash 中这两个函数的流行实现中：

https://github.com/lodash/lodash/blob/master/debounce.js https://github.com/lodash/lodash/blob/master/throttle.js

节流功能其实只是debounce的具体配置：

function throttle(func, wait, options) 
  let leading = true
  let trailing = true

  if (typeof func != 'function') 
    throw new TypeError('Expected a function')
  
  if (isObject(options)) 
    leading = 'leading' in options ? !!options.leading : leading
    trailing = 'trailing' in options ? !!options.trailing : trailing
  
  return debounce(func, wait, 
    'leading': leading,
    'maxWait': wait,
    'trailing': trailing
  )