十万pv的网站建设,北京托管网站,北京造价信息网,商业图片素材网站在前端的日常开发中#xff0c;经常会使用到两个函数防抖#xff08;Debounce#xff09;和节流#xff08;Throttle#xff09;#xff0c;防抖函数可以有效控制在一段时间内只执行最后一次请求#xff0c;例如搜索框输入时#xff0c;只在输入完成后才进行请求接口。… 在前端的日常开发中经常会使用到两个函数防抖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] useStateV(value)const lastExecuted useRefnumber(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可以达到一样的效果有些场景下可能还更方便些但总的来说本质还是那样。 ## 最后 整理了75个JS高频面试题并给出了答案和解析基本上可以保证你能应付面试官关于JS的提问。     **有需要的小伙伴可以点击下方卡片领取无偿分享**
