节流和去抖动功能答案

【问题标题】：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的可能重复

标签： javascript function throttling debouncing

【解决方案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 中这两个函数的流行实现中：

节流功能其实只是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
  })
}

【讨论】：