[React] - 前端实现防抖、节流Demo（自定义 Hooks 封装）

全部 TS 版本，可直接复制到项目练习；每个 hook 附带使用示例。 注意点：清理副作用、组件卸载清除定时器、闭包陷阱、依赖处理。

1. useDebounce 防抖

多次触发，等待一段时间没有再触发，才执行；输入搜索常用。

import { useEffect, useState } from 'react'

/**
 * 防抖值
 * @param value 需要防抖的值
 * @param delay 延迟 ms
 */
function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value)

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)

    // 组件卸载 / value变化 清除定时器
    return () => {
      clearTimeout(timer)
    }
  }, [value, delay])

  return debouncedValue
}

// 📌 使用示例
function DemoDebounce() {
  const [inputVal, setInputVal] = useState('')
  const debounceVal = useDebounce(inputVal, 500)

  // debounceVal 500ms后才更新，用来发搜索请求
  useEffect(() => {
    if (debounceVal) {
      console.log('发起搜索：', debounceVal)
    }
  }, [debounceVal])

  return <input value={inputVal} onChange={(e) => setInputVal(e.target.value)} placeholder="输入搜索" />
}

2. useThrottle 节流

固定时间内只执行一次；滚动、窗口 resize、按钮高频点击。

import { useEffect, useRef, useState } from 'react'

/**
 * 节流值
 * @param value
 * @param delay ms
 */
function useThrottle<T>(value: T, delay: number): T {
  const [throttledValue, setThrottledValue] = useState<T>(value)
  const lastExec = useRef<number>(0)

  useEffect(() => {
    const now = Date.now()
    if (now - lastExec.current >= delay) {
      setThrottledValue(value)
      lastExec.current = now
    }
  }, [value, delay])

  return throttledValue
}

// 📌 使用示例
function DemoThrottle() {
  const [scrollY, setScrollY] = useState(0)
  const throttleY = useThrottle(scrollY, 200)

  useEffect(() => {
    const handler = () => setScrollY(window.scrollY)
    window.addEventListener('scroll', handler)
    return () => window.removeEventListener('scroll', handler)
  }, [])

  return <div style={{height:'150vh'}}>节流滚动位置：{throttleY}</div>
}