什么是防抖和节流,他们的应用场景有哪些,如何实现
防抖与节流都是前端优化的方案,使用后可以节省前端消耗的资源,针对不用的场景采用合适的方案
-
防抖[debounce]是高频事件触发后,n秒内只执行一次,连续触发就会发生抖动,为了防止抖动会在连续触发中取消上一次事件,直达间隔时间达到n秒开始执行事件,总结来说就是防抖取连续触发的最后一次动作
-
实现逻辑:闭包实现,自定义Hook实现
//闭包实现逻辑:闭包中存储的变量不会被回收 const debounce = (fn,time)=>{ let timeOut = null; return (paramter)=>{ if(timeOut){ clearTimeout(timeOut) } timeOut = setTimeout(()=>{ fn(paramter) },time) } } const inputChange = debounce(()=>{console.log('debounce')},500) inputChange() //自定义hook实现逻辑:useEffect会在下次执行时先执行return函数 //使用值触发防抖还是函数触发防抖主要看在防抖过程中,中间值是否需要在页面上显示,例如搜索框的需要时时展示在页面上,所以使用值改变,触发防抖 //值快速更改触发防抖 const useDebounce = (value,time)=>{ const [debounceValue,setDebounceValue]=useState(value) useEffect(()=>{ const timeOut = setTimeoout(()=>{ setDebounceValue(value) },time) return ()=>{ clearTimeout(timeOut) } },[value,time]) return debounceValue } //函数快速执行,触发防抖 const useDebounceFn = (fn,time,dep=[])=>{ const { current } = useRef({fn,timeOut:null})//使用useRef进行变量timeOut的记录 useEffect(()=>{ current.fn = fn },[fn]) return useCallback((param)=>{ if(current.timeOut){ clearTimeout(current.timeOut) } current.timeOut = setTimeout(()=>{ current.fn(param) },time) },dep) }
-
使用场景:所有在高频触发中取最后一次的结果都可以使用防抖【用户搜索、mousedown、mousemove、 keyup、keydown、调整窗口大小事件resize】
-
节流[throttle]是在高频事件触发中,n秒内只执行一次,节流会稀释函数的执行频率,总结来说节流是在高频触发中取第一次进行执行,隔n秒再次执行
-
实现逻辑:通过闭包
//闭包实现 const throttle = (fn,time)=>{ let timer = null return (param)=>{ if(timer){ return } //fn(param) fn的触发放在定时函数里面也可以,外面直接执行也可以 timer = setTimeout(()=>{ fn(param) time = null },time) } } //hook实现,借助useRef缓存数据 const useThrottle = (value,time)=>{ const [throttleValue,setThrottleValue] = useState(value) const { current } = useRef({timer:null}) useEffect(()=>{ if(current.timer){ return } current.timer = setTimeout(()=>{ setThrottleValue(value) current.time = null },time) },[value,time]) return throttleValue } const useThrottle = (fn,time,dep=[])=>{ const { current } = useRef({fn,timer:null}) useEffect(()=>{ current.fn = fn },[fn]) return useCallback((param)=>{ if(current.timer){ return } current.timer = setTimeout(()=>{ fn(param) current.time = null },time) },dep) }
-
使用场景:所有高频事件触发中执行第一次【图片下拉加载、滚动页面】