在React中使用防抖节流

在React中使用防抖节流

防抖和节流

参考链接：React hooks 怎样做防抖？

先来介绍一下防抖和节流

防抖：事件触发后延迟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 // ms 内不允许再次执行 setTimeout(() => { 
    fn() flag = true // 重置为true，允许执行 }, delay) } } 

在React里面使用防抖和节流

封装成hook

useDebounce

type FnReturnValueType = 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 FnType = (...arg: any[]) => any interface RefType { 
    fn: FnType timer: NodeJS.Timeout | null } function useDebounce(this: any, fn: FnType, delay: number, dep: any[] = []) { 
    // 使用 useRef 的目的是：保留上一次的timer，以至于让 if 语句走通，然后清除上一次的 timer // 否则，没有清除定时器，达不到防抖效果 const { 
    current } = useRef<RefType>({ 
    fn, timer: null }) current.fn = fn // console.log('this', this) 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 FnType = (...arg: any[]) => any 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 // console.log('this', this) return useCallback((...args) => { 
    if (!current.timer) { 
    current.timer = setTimeout(() => { 
    current.timer = null }, delay) current.fn.apply(this, args) } }, dep) } export default useThrottle