common-hook/es/effect/useTimeout.js

提供项目中常用的 React Hooks

//@ts-nocheck
import { useCallback, useEffect, useRef } from "react";
import { useLatest } from "common-hook";
import { isNumber } from "common-screw";
/**
 * @name 处理setTimeout的Hook
 * @description 例如:3000ms 后执行一次
 * @example
 * useTimeout(() => {setState(state + 1)}, 3000)
 */
export const useTimeout = (fn, delay) => {
    const fnRef = useLatest(fn);
    const timerRef = useRef();
    useEffect(() => {
        //@ts-ignore
        if (!isNumber(delay) || delay < 0)
            return;
        timerRef.current = setTimeout(() => {
            fnRef.current();
        }, delay);
        return () => {
            if (timerRef.current) {
                clearTimeout(timerRef.current);
            }
        };
    }, [delay]);
    const clear = useCallback(() => {
        if (timerRef.current) {
            clearTimeout(timerRef.current);
        }
    }, []);
    return clear;
};