react 类组件写一个防抖函数
时间: 2024-03-19 13:45:49 浏览: 15
首先需要在类组件中定义一个函数来实现防抖:
```javascript
debounce = (fn, delay) => {
let timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
```
然后在需要使用防抖的函数中调用该函数即可实现防抖:
```javascript
handleInput = (e) => {
const { value } = e.target;
// 调用防抖函数
const debounceFunc = this.debounce(this.sendRequest, 500);
debounceFunc(value);
}
sendRequest = (value) => {
// 发送请求的代码
}
```
以上代码中,`handleInput` 函数会在输入框中输入内容时触发,它会调用 `debounce` 函数来创建一个防抖函数 `debounceFunc`,然后将 `sendRequest` 函数以及需要传递的参数 `value` 作为参数传递给防抖函数。在 `debounceFunc` 函数内部,会通过 `setTimeout` 来实现防抖的效果,当延迟时间到达时,才会真正调用 `sendRequest` 函数。这样就能够有效地避免在短时间内多次触发请求的问题。