节流和去抖功能

Question

我对节流和去抖函数的概念有点不确定。

据我了解：

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

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

问题：

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

Answer 1

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

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

Answer 2

简称：

throttle是为了在常量调用的时候在一定的时间间隔内调用函数。喜欢：window.scroll。 debounce 被设计为在特定时间内只调用一次函数。不管它叫了多少次。喜欢：提交按钮点击。这是示例：

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

你可以看出区别。

Answer 3

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

throttle函数其实就是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
  })
}

节流和去抖功能

Throttle & debounce functions

javascript

throttling

function

debouncing

据我了解：

问题：