react简单实现防抖和节流

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

在日常开发中，我们经常会有这样的需求：监听用户的输入（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)
         }
     }
 }

到此这篇关于react简单实现防抖和节流的文章就介绍到这了,更多相关react 防抖和节流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论