当前位置：首页 > news >正文

在 React 中如何使用定时器

news 2025/7/20 3:05:14

在React中使用定时器通常有两种方式：使用setInterval和setTimeout函数。

使用setInterval函数：

首先，在组件中导入useEffect和useState函数：

       import React, { useEffect, useState } from "react";

在组件中声明一个状态变量来存储定时器的ID：

        const [timerId, setTimerId] = useState<number | null>(null);

在组件的useEffect钩子函数中启动定时器：

       useEffect(() => {const id = setInterval(() => {// 定时器执行的代码}, 1000);setTimerId(id);return () => {clearInterval(timerId); // 组件卸载时清除定时器};}, []);

在上述代码中，通过useEffect中的一个空数组([])作为依赖项，确保只在组件挂载时启动一次定时器，并使用clearInterval函数在组件卸载时清除定时器。

使用setTimeout函数：

首先，在组件中导入useEffect和useState函数：

        import React, { useEffect, useState } from "react";

在组件中声明一个状态变量来存储定时器的ID：

        const [timerId, setTimerId] = useState<number | null>(null);

在组件的useEffect钩子函数中启动定时器：

       useEffect(() => {const id = setTimeout(() => {// 定时器执行的代码}, 1000);setTimerId(id);return () => {clearTimeout(timerId); // 组件卸载时清除定时器};}, []);

在上述代码中，通过useEffect中的一个空数组([])作为依赖项，确保只在组件挂载时启动一次定时器，并使用clearTimeout函数在组件卸载时清除定时器。

请根据你的具体需求选择适合的定时器函数，并根据组件的生命周期来启动和清除定时器。

实际案例：

import { useEffect, useState } from "react";const TimerPage = () => {const [changeNum, setChangeNum] = useState<any>(null);const [getChangeNum, setGetChangeNum] = useState<any>(null);const initiate = () => {let num = 0;const id = setInterval(() => {// 定时执行的代码num++;if (num == 11) {// clearTimeout(id); // 在 getChangeNum 等于 10 时关闭定时器num = 0;}setGetChangeNum(num);}, 1000); // 每隔1秒执行一次setChangeNum(id);};return (<div className="box"><p onClick={initiate}>显示数字 {getChangeNum} </p></div>);
};export default TimerPage;

首先，声明了一个变量num并初始化为0，用来存储递增的数字。
然后，使用setInterval函数创建了一个定时器。setInterval函数接受两个参数：回调函数和时间间隔。在这里，回调函数为一个箭头函数，用于执行定时的递增操作。
在回调函数中，num自增1，表示递增的数字。当num等于11时，通过条件判断将num重置为0，实现周期递增的效果。
在回调函数中，使用setGetChangeNum函数将递增的结果num更新到getChangeNum状态变量中，以便将其显示在文本段落元素中。
setInterval的第二个参数为时间间隔，这里设置为1000毫秒，即每隔1秒执行一次回调函数。
最后，使用setChangeNum函数将定时器的ID存储到changeNum状态变量中，以便在需要的时候清除定时器。