react实现防抖节流

Posted 老张在线敲代码

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react实现防抖节流相关的知识,希望对你有一定的参考价值。

import React,  Component  from "react";
class UnDebounce extends Component 
  constructor(props) 
    super(props);
    this.state = 
      timerId: null, //定时器开关
    
  

  //模仿ajax请求
  ajax = (content) => 
    console.log('ajax:' + content)
  

  debounce = (fn, delay = 3000) => 
    // 防抖
    return (...rest) =>  //箭头函数是没有arguments的 所以用...rest 来代替
      let args = rest;
      if (this.state.timerId) clearTimeout(this.state.timerId);//要用this.timerId 而不能直接定义var timerId=null;
      this.state.timerId = setTimeout(() => 
        fn.apply(this, args)
      , delay)
    

  

  throttle = (fn, delay = 3000) => //
    //  节流
    let canRun = true;
    return (...rest) => 
      if (!canRun) return;
      canRun = false;
      setTimeout(() => 
        fn.apply(this, rest);
        canRun = true;
      , delay)

    
  

  onUndebounceKeyUpClick = (e) => //只要是按下键盘就会发生ajax请求 会出现资源浪费 一般情况下当输入完整字符才会请求数据
    this.ajax(e.target.value)
  


  onDebounceKeyUpClick = (e) => //加入防抖动后 在频繁输入后 不会发送请求
    let debounceAjax = this.debounce(this.ajax, 3000)
    debounceAjax(e.target.value)
  

  onThrottleKeyUpClick = (e) =>  //ajax会按照我们设定的时间,每1s执行一次
    let throttleAjax = this.throttle(this.ajax, 3000);
    throttleAjax(e.target.value)
  
  render() 
    return (
      <div>
        正常input:<input onKeyUp=this.onUndebounceKeyUpClick />
        防抖动的input:<input onKeyUp=this.onDebounceKeyUpClick />
        节流的input:<input onKeyUp=this.onThrottleKeyUpClick />
      </div>
    );
  


export default UnDebounce;

以上是关于react实现防抖节流的主要内容,如果未能解决你的问题,请参考以下文章

防抖和节流的实现

进阶 6-6 期深入篇 | 阿里 P6 必会 Lodash 防抖节流函数实现原理

React中事件节流防抖

React入门:编写带防抖节流的按钮组件

JavaScript防抖与节流

JavaScript防抖与节流