【react-use】useInterval

最新推荐文章于 2025-03-30 10:23:23 发布

折桂怀橘

最新推荐文章于 2025-03-30 10:23:23 发布

阅读量709

点赞数

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

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

版权

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

81 篇文章

订阅专栏

useInterval是一个ReactHooks实现的函数，它基于useEffect，用于方便地设置和清除定时器。这个Hook接受一个回调函数和延迟时间作为参数，使用方法类似setInterval，但自动处理清除定时器的问题，避免内存泄漏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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