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实现防抖节流的主要内容,如果未能解决你的问题,请参考以下文章