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)

         }

     }

 }

你可能感兴趣的:(前端,前端框架)