lodash 的 _.debounce() 和 _.throttle() 以及函数防抖和函数节流的区别

_.debounce() 和 _.throttle()

防抖：

语法

_.debounce(func, [wait=0], [options={}])

创建一个防抖动函数。会从上一次调用结束后延迟 wait 毫秒后继续调用 func 方法，
该函数提供一个 cancel 方法以供取消延迟函数的调用以及 flush 方法立即调用。

options 对象这个参数决定了怎么调用 func 函数。
options.leading 与（或） options.trailing 决定延迟（wait）前，func 如何调用（也就是先调用再等待还是先等待再调用）。
func 会传入最后一次传递的参数给 debounce 这个函数。随后调用的 debounce 函数返回的是最后一次 func 调用的结果。

注意：

如果 leading 和 trailing 都为 true，则 func 允许的 trailing 调用条件为 wait 期间多次调用 debounce 防抖方法。
如果 wait 为 0 并且 leading 为 false, func 调用将被推迟到下一个点，类似 setTimeout 为 0 的超时。

参数：

func: 需要防抖的函数
wait(number): 毫秒数
opotions(object): 选项对象
- options.leading(boolean): 调用在防抖开始前。
- options.trailing(boolean): 调用在防抖结束后。
- options.maxWait(number): 允许 func 被延迟的最大毫秒数。

返回值：

返回新的防抖动函数。

示例代码请看官网：
lodash 之 debounce

节流：

语法

_.throttle(func, [wait=0], [options={}])

throttle() 方法创建一个节流函数，意为在 wait 秒内最多执行一次 func 函数。
该函数同时提供一个 cancel 方法以供取消延迟函数的调用以及 flush 方法立即调用。

options 对象这个参数决定了怎么调用 func 函数。options.leading 与（或） options.trailing 决定延迟（wait）前，func 如何调用。func 会传入最后一次传递的参数给这个函数。随后调用的函数返回的是最后一次 func 调用的结果。

注意：

如果 leading 和 trailing 都为 true，则 func 允许的 trailing 调用条件为 wait 期间多次调用。
如果 wait 为 0 并且 leading 为 false, func 调用将被推迟到下一个点，类似 setTimeout 为 0 的超时。

参数：

func: 需要节流的函数
wait(number): 毫秒数
opotions(object): 选项对象
- options.leading(boolean): 调用在节流开始前。
- options.trailing(boolean): 调用在节流结束后。

返回值：

返回节流的函数。

// 避免在滚动时过分的更新定位
$(window).on("scroll", _.throttle(updatePosition, 500));
function updatePosition() {
  // 假装在更新定位
  console.log(1);
}
//   点击后就调用 renewToken， 但 5 分钟内超过一次
var throttled = _.throttle(renewToken, 300000, { trailing: false });
$(ele).on("click", throttled);
// 取消一个 trailing 的节流调用
$(window).on("popstate", throttled.cancel);
function renewToken() {
  // 假装在请求更新 token
  console.log(2);
}

_.debounce() 和 _.throttle() 的 api 介绍和使用方法取自官网，加了一点修饰。

防抖和节流的区别

防抖:

把突然爆发的事件(比如点击事件)组合成一个单一的事件。
场景应用：

浏览器的 resize 事件，借助防抖我们只需要关注用户拖动窗口的最后一次的值。
比如用户输入内容时，使用防抖只在用户停止输入时触发事件。
类似的用例是等到用户停止输入之后再验证其输入值。提示“您的密码太短”之类的消息。

节流：

保证每 x 毫秒执行一次函数，它是恒定的流量。
场景应用：

比如每 200 毫秒检查一次你的滚动位置来触发一个 CSS 动画。
比如上滑加载，我们需要检测用户距离底部多远，当用户接近底部时，我们需要发送 ajax 请求数据回来。在这里，防抖没用，因为它只在用户停止滚动时触发，而我们需要在用户到达底部之前获取数据。而节流可以让我们不停检测距离底部多远？
节流可以保证函数有规律地执行，至少每 x 毫秒执行一次。

防抖和节流的区别总结和翻译自下面这篇文章，更多详细信息可访问
David Corbacho’s article 查看 _.debounce 函数防抖和 _.throttle 函数节流的区别

小技巧

如果你只需要防抖和节流函数，您可以使用 Lodash 自定义构建器输出一个自定义的 2KB 最小化库。用下面这个简单的命令构建它:

1 2	npm i -g lodash-cli lodash include = debounce, throttle