react、vue 的hooks定时执行函数定时请求、定时更新

最新推荐文章于 2025-04-20 19:45:06 发布

weixin_43869439

最新推荐文章于 2025-04-20 19:45:06 发布

阅读量124

点赞数 3

文章标签： react.js vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_43869439/article/details/146552201

版权

import { useEffect, useRef } from "react";

/**
 * @description 定时执行函数
 * 定时请求、定时更新等
 * @param {Function} callback 定时执行的函数(必传)
 * @param {number null} delay 定时时间(默认5秒)
 * @param {number} key 重置键(默认无)
 * */
export const useInterval = (callback: () => void, delay: number | null = 5000, key?: number) => {
	const savedCallback = useRef<() => void>();

	// 更新保存的回调
	useEffect(() => {
		savedCallback.current = callback;
	}, [callback]);

	// 管理定时器
	useEffect(() => {
		const tick = () => {
			savedCallback.current?.(); // 安全调用
		};

		if (delay !== null) {
			tick(); // 立即执行一次
			const id = setInterval(tick, delay);
			return () => clearInterval(id); // 清理旧定时器
		}
	}, [delay, key]);
};

页面调用

	import { useInterval } from "@/hooks/useInterval";
	
	...
	// 通过 key 强制重置定时器
	const [timerKey, setTimerKey] = useState(0); 
	// 轮询请求
	useInterval(fetchData, 5000, timerKey);
	// 重置定时器的回调
	const handleResetPolling = useCallback(() => {
		setTimerKey(prev => prev + 1);
	}, []);
	// 按钮点击或者重新选择后重置定时器
	const handleChange = (value: string) => {
		handleResetPolling();
	};