天天看點

React Hooks系列之useInterval

import { useRef, useEffect } from 'react';

/**
 * @description: Hooks useInterval 間限執行鈎子
 * @param {callback} Function  回調函數
 * @param {delay}    number    延遲時間
 * @demo  =>  useInterval(() => {}, 1000) 
 */

export function useInterval(callback: Function, delay: number) {
    const latestCallback = useRef<Function>(() => { });

    useEffect(() => {
        latestCallback.current = callback;
    });

    useEffect(() => {
        if (delay !== null) {
            const interval = setInterval(() => latestCallback.current(), delay || 0);
            return () => clearInterval(interval);
        }
        return undefined;
    }, [delay]);
}