react简单实现防抖和节流教程方法

r囧r小猫 2023-09-26 19:58 22阅读 0赞

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

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

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

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

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

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

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

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)  
\}  
\}

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

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

原生：

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