在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