debounce.js
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
各位大佬给个赞吧