一文搞懂如何在 React 中使用 防抖(Debounce)和 节流(Throttle)

在前端的日常开发中,经常会使用到两个函数防抖(Debounce)和节流(Throttle),防抖函数可以有效控制在一段时间内只执行最后一次请求,例如搜索框输入时,只在输入完成后才进行请求接口。而节流函数则是每隔一段时间就执行一次请求。

在 React 应用开发时,不同于普通的 js,而且通过 react hook 机制,可以更方便的实现这两个功能。

防抖函数(Debounce)

从上面的图中可以看出,使用了防抖函数后,无论我们中间点了多少次,也只会在延时结束时执行一次。

使用 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]) 

最终的效果如下:

节流函数(Throttle)

上面的图比较好看出来节流函数的应用场景,一般是在滚动屏幕等执行次数很密集的情况下使用,有点限流的意思。

使用 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('被拖动了~~~') }}
/> 

可以看到,在不试用节流函数的情况下,刚一拖动,就执行了许多许多次,如果这是请求,肯定是能把接口都刷爆的,所以这种情况一定要使用节流函数来控制一下频率,下面是使用了节流函数的效果:

const changeThrottle = useCallback(throttle(() => {info('异步请求....')
}, 2000), [])

<div style={{width: 50, height: 50, backgroundColor: 'blue'}} draggable={true}onDrag={changeThrottle}
/> 

加了节流函数后,无论怎样快速拖动,执行的逻辑也是按照间隔时间的频率进行执行的。

在 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://www.uudwc.com/A/Y6PVy/

## 最后 整理了75个JS高频面试题,并给出了答案和解析,基本上可以保证你能应付面试官关于JS的提问。 ![](https://img-blog.csdnimg.cn/856589141da54a1fafc99ea9e7b017fe.png#pic_center) ![](https://img-blog.csdnimg.cn/72699310cddb41aa99c5f4387dfbefdf.png#pic_center) ![](https://img-blog.csdnimg.cn/431073429e9340ceb3c3880c0066c179.png#pic_center) ![](https://img-blog.csdnimg.cn/3eeb2c5bec44424da347971f2cb7ffbf.png#pic_center) > **有需要的小伙伴,可以点击下方卡片领取,无偿分享**

原文地址:https://blog.csdn.net/weixin_53312997/article/details/129248753

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

h
上一篇2023年09月12日 03:06
Android11 open failed: EACCES (Permission denied)的解决方法
下一篇 2023年09月12日 03:07