react简单实现防抖和节流

在日常开发中，我们经常会有防抖和节流的需要，可以减小服务器端压力，提升用户体验，本文就详细的介绍了react简单实现防抖和节流

 一、为什么要采用防抖和节流

防抖和节流可以节省资源，减小服务器端压力，提升用户体验。

在日常开发中，我们经常会有这样的需求：监听用户的输入（keyup、keydown）、浏览器窗口调整大小和滚动行为（resize）、鼠标的移动行为（mousemove）等。如果这些事件一触发我们就执行相应的事件处理函数的话，那将会造成较大的资源浪费或者给用户带来不好的体验。

这时防抖和节流就派上用场了！

1.防抖：

防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。
思路：每次触发事件时都取消之前的延时调用方法。
使用的本质：不允许某一行为触发。一般用于input输入框

防止抖动的意思，也就是不抖动时才进行相应的处理。比如一根拉直的弹簧，我们拨动一下它就会抖动，过一段时间后弹簧会恢复到平静的状态（从拨动弹簧使其抖动到恢复平静的时长就是代码例子的ms值）。在这个过程中，拨动弹簧的这一行为假设为事件被触发（代码中的input事件被触发），当弹簧恢复平静时我们再执行事件处理函数（代码中的sayHi函数）。基于以上假设，当我们在弹簧还没恢复到平静状态时，又不断地拨动它（清除了原来的setTimeout，并重新开始计时），因为弹簧还没恢复到平静，那么事件处理函数就一直不会被执行。只有当我们拨动它，并且之后再也不动它（也就是最后一次触发），等它恢复到平静状态时（setTimeout时间到达），事件处理函数才会被执行。

实现方法：可以借助react的ahooks库的useDebounce或者是lodash库中的_.debounce防抖

原生：（利用闭包中变量不会被销毁内存的原理）

1 2 3 4 5 6 7 8 9 10

function debounce(fn, ms) {  //fn:要防抖的函数 ms:时间     let timerId // 创建一个标记用来存放定时器的返回值     return function () {          timerId && clearTimeout(timerId) // 每当用户输入的时候把前一个 setTimeout clear 掉         // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数         timerId = setTimeout(() => {              fn.apply(this, arguments)          }, ms)      }  }

2、节流

节流： 高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。
思路：每次触发事件时都判断当前是否有等待执行的延时函数。
使用的本质：允许某一行为触发，但是触发的频率不能太高。节流一般用于动画相关的场景。

实现方法：可以借助react的ahooks库的useThrottle或者是lodash库中的_.throttle来节流

原生：

1 2 3 4 5 6 7 8 9 10 11 12 13

function throttle(fn, ms) {      let timerId // 创建一个标记用来存放定时器的id      return function () {          // 没有定时器等待执行，则表示可以创建新的定时器来执行函数         if (!timerId) {              timerId = setTimeout(() => {                  // 定时器id清空，表示可以执行下一次调用了                 timerId = null                  fn.apply(this, arguments)              }, ms)          }      }  }