React Hooks 手写节流useThrottle

定义

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

export interface ThrottleRefType {
    fn: Function,
    timer?: NodeJS.Timeout
}

export type ThrottlePropsType = [Function, number, Array<any>]


const useThrottle = (...[fn, throttle, deps]: ThrottlePropsType) => {

    const { current } = useRef<ThrottleRefType>({ fn })

    useEffect(() => {
        current.fn = fn
    }, [fn, current])

    return useCallback(
        function (this: any, ...args: any[]) {
            if (!current.timer) {
                current.timer = setTimeout(() => {
                    current.fn.apply(this, args)
                    delete current.timer
                }, throttle)
            }
        },
        // eslint-disable-next-line
        [...deps, current, throttle]
    )
}

export default useThrottle

使用

    const throttleFn = useThrottle(() => { console.log('run') },timeout, deps)