在前端的日常开发中,经常会使用到两个函数防抖(Debounce)和节流(Throttle),防抖函数可以有效控制在一段时间内只执行最后一次请求,例如搜索框输入时,只在输入完成后才进行请求接口。而节流函数则是每隔一段时间就执行一次请求。
在 React 应用开发时,不同于普通的 js,而且通过 react hook 机制,可以更方便的实现这两个功能。
防抖函数(Debounce)
![](https://i-blog.csdnimg.cn/blog_migrate/0151f2c4dc4b7165358622192b2070cc.gif)
从上面的图中可以看出,使用了防抖函数后,无论我们中间点了多少次,也只会在延时结束时执行一次。
使用 js 简单实现防抖函数
function debounce(fn: any, wait: number) {let timer: anyreturn (...args: any) => {// @ts-ignoreconst context = thisif (timer) clearTimeout(timer)timer = setTimeout(() => {timer = nullfn.apply(context,args)}, wait)}
}
防抖的原理比较简单,就是使用闭包保存住计时器 timer 和 传递的函数,然后每次进入时都把之前的 timer 清空掉,这样延时 wait 每次都会从新开始计算,以此来达到只在延时结束后执行一次的效果。
在 React Input 中使用防抖函数
假设有个需求,用户通过输入商品名来搜索商品,那么不可能每次用户输入时都去请求后台接口,最好的处理方式就是加上防抖功能,只在用户输入完成后请求一次,这样做可以避免多次无效的调用后台接口。
实现这个功能用传统的方法可以这样做:
// 防抖函数,间隔时间为 2 秒
const changeDebounce = useCallback(debounce(handleChange, 2000), [])
// 搜索框,非受控组件
<Input onChange={(e) => changeDebounce(e)} style={{width: 150, marginRight: 20}}/>
可以看出上面的方式比较适合非受控的组件,如果是受控组件,可以采用 React Hooks 机制来实现:
// 传递给 Input 组件的值
const [value, setValue] = useState('')
// useEffect 钩子函数
useEffect(() => {const getData = setTimeout(() => {if (!value) returninfo('异步请求....')}, 2000)return () => clearTimeout(getData)
}, [value])
// 搜索框,受控组件
<Input value={value} onChange={(e) => setValue(e.target.value)} style={{width: 150, marginRight: 20}}/>
可以看出,使用 useEffect 钩子函数可以很方便的实现防抖功能,原因就在于依赖了 value 值的变化,每次 value 变化后 useEffect 钩子都会执行清除逻辑,也就是 return 返回的函数,重新执行,这样就保证了多次输入内容后,只有到了间隔时间才会执行一次的逻辑。
如果再抽象一点,我们可以把这段逻辑提取成一个自定义 hook:
const useDebounce = <V>(value: V, wait: number) => {const [debounceValue,setDebounceValue] = useState(value)useEffect(() => {const timer = setTimeout(() => setDebounceValue(value),wait)return () => clearTimeout(timer)},[value,wait])return debounceValue
}
在自定义 hook 中,使用了另外一个 state 进行保存和更新状态,只有在间隔时间到了才会更新,然后将这个新的 state 返回出去,在页面上可以这样使用,直接依赖 返回出来的状态,这样每次这个状态改变时,就是间隔时间到了的时候,就可以进行异步请求了。
const debounceValue = useDebounce(value,2000)
useEffect(() => {if (!debounceValue) returninfo('异步请求....')
},[debounceValue])
最终的效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/698ee1aa2f972c1cda1ae92ac6034241.gif)
节流函数(Throttle)
![](https://i-blog.csdnimg.cn/blog_migrate/f0dc28b5ef9da36050b76f2ef19e85db.gif)
上面的图比较好看出来节流函数的应用场景,一般是在滚动屏幕等执行次数很密集的情况下使用,有点限流的意思。
使用 js 实现节流函数
function throttle(fn: any, wait: number) {let inThrottle = falsereturn (...args: any) => {// @ts-ignoreconst context = thisif (!inThrottle) {inThrottle = truefn.apply(context, args)setTimeout(() => {inThrottle = false}, wait)}}
}
节流函数实现的方式就是通过变量来控制是否执行逻辑,这里使用了 inThrottle 这个 boolean 值来进行控制,如果时间没到就一直是 true 的状态,直到时间到了后开始执行逻辑。
下面通过个小例子演示一下没有使用节流函数时,拖动效果:
<div style={{width: 50, height: 50, backgroundColor: 'blue'}} draggable={true} onDrag={() => { info('被拖动了~~~') }}
/>
![](https://i-blog.csdnimg.cn/blog_migrate/ae80d7b4a5269b7d4852a4a9dd8926b7.gif)
可以看到,在不试用节流函数的情况下,刚一拖动,就执行了许多许多次,如果这是请求,肯定是能把接口都刷爆的,所以这种情况一定要使用节流函数来控制一下频率,下面是使用了节流函数的效果:
const changeThrottle = useCallback(throttle(() => {info('异步请求....')
}, 2000), [])
<div style={{width: 50, height: 50, backgroundColor: 'blue'}} draggable={true}onDrag={changeThrottle}
/>
![](https://i-blog.csdnimg.cn/blog_migrate/8bb809d333de850104d67323ad15da9d.gif)
加了节流函数后,无论怎样快速拖动,执行的逻辑也是按照间隔时间的频率进行执行的。
在 React 中使用节流函数
我们可以像上面的防抖函数一样,将节流函数也使用 React Hook 来实现:
const useThrottle = <V>(value: V, wait: number) =>{const [throttledValue, setThrottledValue] = useState<V>(value)const lastExecuted = useRef<number>(Date.now())useEffect(() => {if (Date.now() >= lastExecuted.current + wait) {lastExecuted.current = Date.now()setThrottledValue(value)} else {const timerId = setTimeout(() => {lastExecuted.current = Date.now()setThrottledValue(value)}, wait)return () => clearTimeout(timerId)}}, [value, wait])return throttledValue
}
这里主要通过时间对比来控制是否更新 throttledValue,以达到节流的效果,在组件中可以这样使用:
const [value, setValue] = useState(0)
const throttledValue = useThrottle(value, 2000)
useEffect(() => {if (value === 0) returninfo('throttle 异步请求....')
}, [throttledValue])
const handleDrag = () => {setValue(prevState => prevState + 1)
}
<div style={{width: 50, height: 50, backgroundColor: 'blue'}} draggable={true} onDrag={handleDrag}
/>
最终的效果和直接使用 throttle 函数是一样的。
总结
在前端开发中,防抖和节流函数几乎是必备的技能,它们的实现原理都离不开 js 闭包的特性,而在 React 中通过使用自定义的 hook,可以达到一样的效果,有些场景下可能还更方便些,但总的来说本质还是那样。
![](https://i-blog.csdnimg.cn/blog_migrate/1fc9e0e1b5d0ca9caad62d3830267ead.png)