在React中使用防抖节流
防抖和节流
先来介绍一下防抖和节流
防抖：事件触发后延迟n秒在执行，如果在这n秒内再次触发则重新计时。即在一段时间内只允许事件执行一次，常用于表单提交，输入框防抖
节流：事件触发后延迟n秒在执行，并且在这n秒内再次触发事件时不允许执行。即减少一段时间内事件触发的频率，常用与监听滚动条滚动，鼠标移动，窗口大小变化
依据上面的定义可以手写一个防抖和节流
防抖：
const debounce = (fn, delay) => {
let timer
return (...args) => {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn(...args)
}, delay)
}
}
节流：
const throttle = (fn, delay) => {
let flag = true
return () => {
if (!flag) return
flag = false
setTimeout(() => {
fn()
flag = true
}, delay)
}
}
在React里面使用防抖和节流
封装成hook
useDebounce
type FnReturnValueType = void | any | any[]
type FnType = (...arg: any[]) => FnReturnValueType
const debounce = (fn: FnType, ms: number) => {
let timer: NodeJS.Timeout
return (...args: any[]) => {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn(...args)
}, ms)
}
}
const useDebounce = (fn: FnType, ms: number) => {
return debounce(fn, ms)
}
export default useDebounce
接下来使用这个useDebounce
import { FC, useEffect, useState } from 'react'
import useDebounce from './hooks/useDebounce'
const DebounceHooks: FC = () => {
const [count, setCount] = useState(0)
const handleClick = () => {
setCount(count + 1)
}
const handleClickDebounce = useDebounce(handleClick, 500)
return (
<div style={{ textAlign: 'center' }}>
<div>count: {count}</div>
<button onClick={handleClickDebounce}>count + 1</button>
</div>
)
}
export default DebounceHooks
给button按钮点击事件添加防抖，然后我们不停的点击 button 按钮，确实能够实现防抖
接下来我们给这个 DebounceHooks 添加一个 state，通过setInterval不停的让 这个 state 改变
在原来基础上添加一个useEffect
const [number, setNumber] = useState(0)
useEffect(() => {
const t = setInterval(() => {
setNumber(x => x + 1)
}, 500)
}, [])
这个时候我们在点击button按钮，会发现此时防抖已经失效，为什么会出现这个问题呢？
首先我们知道组件 state 更新之后，函数组件会被再次执行。我们通过一个setInterval不停的让 number这个 state改变，所以 DebounceHooks 这个组件在 number 每改变一次就会执行一次，即 useDebounce 这个hook也会跟着执行。
我们现在在返回来看这个 useDebounce 这个hook
const debounce = (fn: FnType, ms: number) => {
let timer: NodeJS.Timeout
return (...args: any[]) => {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn(...args)
}, ms)
}
}
const useDebounce = (fn: FnType, ms: number) => {
return debounce(fn, ms)
}
useDebounce核心是执行了 debounce这个函数，我们在DebounceHooks组件里面每执行一次 useDebounce hook就会执行一次 debounce，每执行一次 debounce 都会通过 let timer: NodeJS.Timeout 对 timer进行一个声明，即 timer 此时为 undefined。那么，问题来了，**一旦timer为undefined，那么 if 语句就不会被执行，if语句不执行那么就无法通过clearTimeout清除上一次的setTimeout，**然后又通过 setTimeout又开起了一个定时器。
防抖的核心就是：在下一次开启定时器之前先清除上一次的定时器。上面的if语句就是用来清除上一次的定时器的，if语句都不被执行了，那么就不会清除上一次的定时器，自然而然防抖也就失效了
所以，我们就需要通过缓存机制来缓存上一次的timer，让 useDebounce每次执行的时候不会让 timer 为 undefined以至于不执行 if语句里面的 clearTimeout ，所以可以使用 useRef 和 useCallback来进行优化
优化后的 useDebounce
import { useRef, useCallback } from 'react'
type FnReturnValueType = any | any[]
type FnType = (...arg: any[]) => FnReturnValueType
interface RefType {
fn: FnType
timer: NodeJS.Timeout | null
}
function useDebounce(this: any, fn: FnType, delay: number, dep: any[] = []) {
const { current } = useRef<RefType>({ fn, timer: null })
current.fn = fn
return useCallback((...args) => {
if (current.timer) {
clearTimeout(current.timer)
}
current.timer = setTimeout(() => {
current.fn.apply(this, args)
}, delay)
}, dep)
}
export default useDebounce
同理：useThrottle
import { useRef, useCallback } from 'react'
type FnReturnValueType = any | any[]
type FnType = (...arg: any[]) => FnReturnValueType
interface RefType {
fn: FnType
timer: NodeJS.Timeout | null
}
function useThrottle(this: any, fn: FnType, delay: number, dep: any[] = []) {
const { current } = useRef<RefType>({ fn, timer: null })
current.fn = fn
return useCallback((...args) => {
if (!current.timer) {
current.timer = setTimeout(() => {
current.timer = null
}, delay)
current.fn.apply(this, args)
}
}, dep)
}
export default useThrottle
|