react组件封装input框的防抖处理的项目实现

//防抖的方法
const debounceOther = (func, wait = 800) => {
  let timeout; // 定时器变量
  return function () {
    clearTimeout(timeout); // 每次触发时先清除上一次的定时器,然后重新计时
    timeout = setTimeout(() => {
      func(arguments);
    }, wait); // 指定 xx ms 后触发真正想进行的操作 handler
  };
};

import { debounceOther } from ".........";
class RelationModal extends Component {
  state = { visible: false, inputErr: '', inputValue: '' };
  getInputValue = debounceOther(() => {
    let { specSelect } = this.props;    //原有数据
    //是否存在相同的
    let index = specSelect.findIndex(item => item.group === this.state.inputValue);
    this.setState({
      inputErr: index === -1 ? "" : '节点名称不允许重复'
    })
  },500)
  //拿到inputValue input输入框有变化500毫秒后 调用防抖方法 
  inputChange = e => {
    this.setState({
      inputValue:e.target.value
    },()=>{
      this.getInputValue()
    }) 
  };
}

import {useRef,useCallback,useEffect} from 'react'
function useDebounce(fn,delay,setval){
  const {current}=useRef({fn,timer:null})
  useEffect(()=>{
    current.fn=fn
  },[fn])
  return useCallback((e)=>{
    setval(e.target.value)
    if(current.timer){
        clearTimeout(current.timer)
    }
    current.timer=setTimeout(()=>{
        current.fn(e)
    },delay)
  })
}
export default useDebounce

import debounce from '../utils/debounce'
import {useState} from 'react'
function My(){
    let [val,setval]=useState('')
    const inputval=debounce(()=>{
        console.log(val);
    },1000,setval)
    return <div>
       <input type="text" value={val} onChange={(e)=>inputval(e)}/>
    </div>
}
export default My