函数防抖和函数节流

一：函数防抖

概念：在事件被触发n秒后再执行，如果在这n秒内又被触发，则重新计时。

          可以用第三方包lodash来处理

npm i lodash  

lodash 会在全局提供一个成员：_

对象中有很多方法，其中有一个方法专门用于处理函数防抖
方法名：debounce
作用：函数防抖
使用方式：

const newFn = _.debounce(fn, 1000);

我们可以使用函数防抖把一个正常的函数变得不正常
两个参数：
参数1：函数
参数2：时间，单位是毫秒
返回值：函数
返回值函数的功能和 fn 和的功能是一样
唯一的区别就是经过了防抖处理

二：函数节流

概念： 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

// 参数1：函数
// 参数2：间隔时间
// 返回值：函数（它的功能和保证的 fn 的功能是一样的，但是被进行了节流处理）
// 第1次直接调用，之后的按照一定频率进行调用
const newFn = _.throttle(fn, 2000);

// newFn()
// newFn()

setInterval(() => {
  console.log("鼠标点击");
  newFn();
}, 200);

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

对二者有以下区别

• 函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的特性却不一样。

  • search 搜索联想，用户在不断输入值时，用防抖来节约请求资源。

  • window 触发 resize 的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

• 函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。

  • 鼠标不断点击触发，mousedown (单位时间内只触发一次)

  • 监听滚动事件，比如是否滑到底部自动加载更多，用 throttle 来判断