lodash中防抖和节流的应用

概念

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于：

遍历 array、object 和 string
对值进行操作和检测
创建符合功能的函数

安装

浏览器环境：

<script src="lodash.js"></script>

通过 npm：

$ npm i -g npm
$ npm i --save lodash

防抖与节流

防抖

n 秒后再执行该事件，若在 n 秒内被重复触发，则重新计时。通俗来讲就是前面的所有的触发都被取消，最后一次执行完毕在规定的时间之后才会触发，也就是说如果连续快速的触发·只会执行一次

举例

代码片段：

_.debounce(func, [wait=0], [options=])
//func (Function): 要防抖动的函数。
//[wait=0] (number): 需要延迟的毫秒数。
//[options=] (Object): 选项对象。
//[options.leading=false] (boolean): 指定在延迟开始前调用。
//[options.maxWait] (number): 设置 func 允许被延迟的最大值。
//[options.trailing=true] (boolean): 指定在延迟结束后调用。

项目使用片段：
使用防抖函数是文本输入框input在连续触发事件后在规定的时间内执行并打印

运行截图：
在连续输入一串数字后，1秒后触发执行
第一次操作：

第二次操作：

节流

n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效

举例

代码片段

_.throttle(func, [wait=0], [options=])
//func (Function): 要节流的函数。
//[wait=0] (number): 需要节流的毫秒。
//[options=] (Object): 选项对象。
//[options.leading=true] (boolean): 指定调用在节流开始前。
//[options.trailing=true] (boolean): 指定调用在节流结束后。

项目使用片段：
使用节流函数使按钮在规定时间内只执行一次

运行截图：
在2秒内多次执行但是只触发执行2次，是num加2