【react-use】useInterval

最新推荐文章于 2023-12-06 22:22:47 发布

折桂怀橘

最新推荐文章于 2023-12-06 22:22:47 发布

阅读量557

点赞数

分类专栏：前端相关知识文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42910765/article/details/128532560

版权

前端相关知识专栏收录该内容

81 篇文章 8 订阅

订阅专栏

react-hooks

useInterval

useInterval

原理：利用了useEffect，所有直接使用，不用考虑要清除定时器，用法和setInterval一致

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]);
}