useThrottle hook节流

useThrottle hook 节流

前言, 节流是前端常用工具函数。比如说进行窗口的 resize, onscroll 等操作时，事件调用的频率很高，使得浏览器开销很大，使得用户的体验很差。使用节流可以极大降低调用的频率，所以将其封装成 hook。

节流的原理： 定义一个计时器，规定在 delay 后执行函数。如果在 delay 时间内再次触发，则会判断定时器是否存在，有则返回（不执行操作）；无则，重新设定一个计时器（delay 后执行函数）。

节流 hook:

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

function useThrottle(fn, delay, dep = []) {
  const { current } = useRef({ fn, timer: null })
  useEffect(() => {
    current.fn = fn
  }, [fn, current])

  return useCallback(
    function f(...args) {
      if (!current.timer) {
        current.timer = setTimeout(() => {
          delete current.timer
        }, delay)
        current.fn.call(this, ...args)
      }
    },
    [...dep, delay, current]
  )
}

export default useThrottle

使用方法：

/*
 * @fn: 函数
 * @delay: 延迟时间（ms）
 * @dep: 依赖
 */
useThrottle(func, 500, [])