react简单实现防抖和节流

 更新时间:2022年05月16日 09:15:41   作者:嘻喽喽喽  
在日常开发中,我们经常会有防抖和节流的需要,可以减小服务器端压力,提升用户体验,本文就详细的介绍了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 防抖和节流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • React Fiber源码深入分析

    React Fiber源码深入分析

    Fiber 可以理解为一个执行单元,每次执行完一个执行单元,React Fiber就会检查还剩多少时间,如果没有时间则将控制权让出去,然后由浏览器执行渲染操作,这篇文章主要介绍了React Fiber架构原理剖析,需要的朋友可以参考下
    2022-11-11
  • React中父子组件通信详解

    React中父子组件通信详解

    这篇文章主要介绍了React中父子组件通信详解,在父组件中,为子组件添加属性数据,即可实现父组件向子组件通信,文章通过围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-08-08
  • 详解React+Koa实现服务端渲染(SSR)

    详解React+Koa实现服务端渲染(SSR)

    这篇文章主要介绍了详解React+Koa实现服务端渲染(SSR),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Electron+React进行通信的方法

    Electron+React进行通信的方法

    electron其实是一个桌面应用程序,不是一个标准的前端web程序,所有没有什么请求的发生,控制台network看不到请求,而是只能通过console.log去打印查看,而且通信协议使用的不是http而是gRPC协议,这篇文章主要介绍了Electron+React如何进行通信,需要的朋友可以参考下
    2022-06-06
  • react版模拟亚马逊人机交互菜单的实现

    react版模拟亚马逊人机交互菜单的实现

    本文主要介绍了react版模拟亚马逊人机交互菜单的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • React 组件性能最佳优化实践分享

    React 组件性能最佳优化实践分享

    这篇文章主要介绍了React组件性能最佳优化实践分享,React组件性能优化的核心是减少渲染真实DOM节点的频率,减少Virtual DOM比对的频率,更多相关内容需要的朋友可以参考一下
    2022-09-09
  • React高阶组件优化文件结构流程详解

    React高阶组件优化文件结构流程详解

    高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React 高阶组件HOC使用小结,一起看看吧
    2023-01-01
  • 十分钟带你快速了解React16新特性

    十分钟带你快速了解React16新特性

    这篇文章主要介绍了十分钟带你快速了解React16新特性,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • React使用context进行跨级组件数据传递

    React使用context进行跨级组件数据传递

    这篇文章给大家介绍了React使用context进行跨级组件数据传递的方法步骤,文中通过代码示例给大家介绍的非常详细,对大家学习React context组件数据传递有一定的帮助,感兴趣的小伙伴跟着小编一起来学习吧
    2024-01-01
  • Objects are not valid as a React child报错解决

    Objects are not valid as a Rea

    这篇文章主要为大家介绍了Objects are not valid as a React child报错解决方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12

最新评论