_.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 最小化库。 用下面这个简单的命令构建它:
npm i -g npm
npm i -g lodash-cli
lodash include = debounce, throttle
