节流和去抖功能

Question

我对油门和去抖功能的概念有点不确定。

As I get it:

我们去掉了一个应该在某个事件发生后调用的函数。它用于拖动，键盘等事件，目的是不会一直触发事件被触发，而是在事件系列完成时触发。通常在键入整个单词后，或者拖动或调整大小序列已结束。

我们限制了在发生一系列事件时应该触发的函数，但是当我们想控制它被调用的次数时。就像在拖动运动中一样，我们希望仅在距离的每x个像素上调用该函数，或者仅每隔100ms调用该函数，而不是每次触发该事件。因此，在发生一系列事件时调用油门功能，只需更少次数。

Question:

这是对这些功能及其目的的正确看法吗？还有其他功能可以区分它们吗？

Answer 1

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

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

Answer 2

简而言之：

throttle用于在常量调用期间在特定间隔内调用函数。喜欢：window.scroll。 debounce旨在在一定时间内仅调用一次函数。不管它叫了多少次。喜欢：提交按钮点击。这是一个例子：

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

你可以看到差异。

Answer 3

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

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

节流功能实际上只是一个特定的去抖配置：

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
  })
}