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 防抖和节流内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 通过实例学习React中事件节流防抖

    节流 方法一 import Throttle from 'lodash-decorators/throttle'; export default class Search extends Component { constructor(props) { super(props) this.handleSearch = this.handleSearch.bind(this); } handleSubmit = (e) => { e.preventDefault(); this.handleSea

  • react简单实现防抖和节流

    目录 一.防抖: 二.节流 防抖和节流可以节省资源,减小服务器端压力,提升用户体验. 在日常开发中,我们经常会有这样的需求:监听用户的输入(keyup.keydown).浏览器窗口调整大小和滚动行为(resize).鼠标的移动行为(mousemove)等.如果这些事件一触发我们就执行相应的事件处理函数的话,那将会造成较大的资源浪费或者给用户带来不好的体验. 这时防抖和节流就派上用场了!! 一.防抖: 防抖:触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间.思路:

  • 浅谈VUE防抖与节流的最佳解决方案(函数式组件)

    浅谈VUE防抖与节流的最佳解决方案(函数式组件)

    前言 有echarts使用经验的同学可能遇到过这样的场景,在window.onresize事件回调里触发echartsBox.resize()方法来达到重绘的目的,resize事件是连续触发的这意味着echarts实例会连续的重绘这是非常耗性能的.还有一个常见的场景在input标签的input事件里请求后端接口,input事件也是连续触发的,假设我输入了"12"就会请求两次接口参数分别是"1"和"12",比浪费网络资源更要命的是如果参数为&quo

  • 如何解决js函数防抖、节流出现的问题

    React中使用防抖函数和节流函数 在React事件调用时,React传递给事件处理程序是一个合成事件对象的实例.SyntheticEvent对象是通过合并得到的. 这意味着在事件回调被调用后,SyntheticEvent 对象将被重用并且所有属性都将被取消. 这是出于性能原因. 因此,您无法以异步方式访问该事件.React合成事件官方文档 所以在用防抖或节流函数封装时,异步方式访问事件对象出现问题.解决的方法如下: 方法一:调用合成事件对象的persist()方法 event.persist

  • 浅析VUE防抖与节流

    浅析VUE防抖与节流

    防抖和节流到底是啥 函数防抖(debounce) 解释:当持续触发某事件时,一定时间间隔内没有再触发事件时,事件处理函数才会执行一次,如果设定的时间间隔到来之前,又一次触发了事件,就重新开始延时. 案例:持续触发scroll事件时,并不立即执行handle函数,当1000毫秒内没有触发scroll事件时,才会延时触发一次handle函数. function debounce(fn, wait) { let timeout = null return function() { if(timeout

  • Vue 中使用lodash对事件进行防抖和节流操作

    有些浏览器事件可以在短时间内快速触发多次,比如调整窗口大小或向下滚动页面.例如,监听页面窗口滚动事件,并且用户持续快速地向下滚动页面,那么滚动事件可能在 3 秒内触发数千次,这可能会导致一些严重的性能问题. 如果在面试中讨论构建应用程序,出现滚动.窗口大小调整或按下键等事件请务必提及 防抖(Debouncing) 和 函数节流(Throttling)来提升页面速度和性能.这两兄弟的本质都是以闭包的形式存在.通过对事件对应的回调函数进行包裹.以自由变量的形式缓存时间信息,最后用 setTimeou

  • 浅析JavaScript 函数防抖和节流

    函数防抖和节流都是对高频动作触发回调函数的一个优化,实现方式上有类似之处.先从使用场景做个区分. 防抖使用场景: 表单输入框校验 提交按钮避免重复提交 节流使用场景: scroll,mousemove,resize等 函数防抖(debounce) 表单输入框校验在用户不停的打字输入时并不需要向后台校验文本,只有当用户停下来一定时间后,这时候默认用户已经输入完毕了可以开始向后台提交文本了. 表单的提交按钮被用户多次连续点击时,显然并不需要每次点击都提交表单.仅在用户不点击之后,把最后一次的点击操作

  • JavaScript 防抖和节流遇见的奇怪问题及解决

    场景 网络上已经存在了大量的有关 防抖 和 节流 的文章,为何吾辈还要再写一篇呢?事实上,防抖和节流,吾辈在使用中发现了一些奇怪的问题,并经过了数次的修改,这里主要分享一下吾辈遇到的问题以及是如何解决的. 为什么要用防抖和节流? 因为某些函数触发/调用的频率过快,吾辈需要手动去限制其执行的频率.例如常见的监听滚动条的事件,如果没有防抖处理的话,并且,每次函数执行花费的时间超过了触发的间隔时间的话 – 页面就会卡顿. 演进 初始实现 我们先实现一个简单的去抖函数 function debounce

  • 关于JavaScript防抖与节流的区别与实现

    目录 1.防抖 2.节流 3.总结 前言: 作为前端开发中会以下两种需求 (1)搜索需求 搜索的逻辑就是监听用户输入事件,等用户输入完成之后把数据发送给后端,后端返回匹配数据,前端显示数据到页面.如果只要用户输入就发请求,这样会给后端造成请求压力,需要控制请求的频率. (2)页面无限加载数据 页面无限加载数据的逻辑就是监听用户用户滚动事件,在用户滚动的过程中,去请求下一页的数据来显示到页面.,那么只要滚动就去发请求,同样会造成后端请求压力,需要控制请求的频率. 以上两种看起来都是控制请求频率的问

  • Vue组件中使用防抖和节流实例分析

    在监听频繁触发的事件时,一定要多加小心,比如 用户在输入框打字.窗口大小调整.滚动.Intersection Observer 事件. 这些事件总是被频繁触发,可能 几秒一次.如果针对每次事件都发起 fetch 请求(或类似的行为),那显然是不明智的. 我们需要做的就是减缓事件处理程序的执行速度.这种缓冲技术就是 防抖(debounce) 和 节流(throttle) . 1. 观察者 防抖 我们先从一个简单的组件开始,我们的任务是 将用户输入到 文本框中的文本 输出到控制台: <templat

  • Vue中使用防抖与节流的方法

    目录 何为防抖/节流 防抖(debounce) 节流(throttle) 页面使用 使用场景 总结 何为防抖/节流 首先先说说何为防抖与节流 防抖(debounce) 防抖就是一段时间内会多次触发相同的事件,而我们的目的却只是想让他们在不触发的多久以后再执行该事件,例如鼠标移动事件(mousemove).输入框变更事件(change)等等,这个时候我们就需要一个方法去控制他,一段时间内没执行该事件后,执行该事件,即为防抖 节流(throttle) 节流就是短时间内会多次触发相同的事件,而我们的目

随机推荐