问题:在使用定时器时,关闭后重新开启,定时器显示会很快速的显示
解决:在开启当前定时定时器时,关闭上一个定时器
import { useState } from "react";
const TimerPage = () => {
const [changeNum, setChangeNum] = useState<any>(null);
const [getChangeNum, setGetChangeNum] = useState<any>(null);
const [activate, setActivate] = useState(false);
const initiate = () => {
let num = 11;
setGetChangeNum(0);
clearInterval(changeNum);
const id = setInterval(() => {
// 定时执行的代码
num--;
if (num === 0) {
num = 10;
}
setGetChangeNum(num);
}, 1000); // 每隔1秒执行一次
setChangeNum(id);
setActivate(!activate);
};
return (
<div className="box">
<button onClick={initiate}>显示数字</button>
<hr></hr>
{activate ? <p>在 {getChangeNum} 秒后刷新数据 </p> : ""}
</div>
);
};
export default TimerPage;
这段代码是一个React函数式组件TimerPage,它包含了一个用于显示递减数字并刷新数据的功能。
首先,通过import { useState } from "react"语句从React库中导入useState钩子函数,用于在函数式组件中声明和管理状态。useState函数返回一个包含状态值和更新状态值的数组。
在组件中,使用useState函数声明了三个状态变量:changeNum、getChangeNum和activate。changeNum用于存储定时器的ID,getChangeNum用于存储递减的数字,activate用于存储刷新数据的状态。初始值都设置为null,false。
接下来,定义了一个名为initiate的函数。在这个函数中,首先声明一个变量num并初始化为11,表示需要递减的初始数字。
然后,使用 clearTimeout
函数清除之前的定时器,以免出现多个重复的定时器。
接下来,使用setInterval函数创建了一个定时器。setInterval函数接受两个参数:回调函数和时间间隔。在这里,回调函数为一个箭头函数,用于执行定时的递减操作。
在回调函数中,num递减1,表示递减的数字。当num等于0时,通过条件判断将num重置为10,实现循环递减的效果。
在回调函数中,使用setGetChangeNum函数将递减的结果num更新到getChangeNum状态变量中,以便将其显示在文本段落元素中。
setInterval的第二个参数为时间间隔,这里设置为1000毫秒,即每隔1秒执行一次回调函数。
最后,使用setChangeNum函数将定时器的ID存储到changeNum状态变量中,以便在需要的时候清除定时器。使用setActivate函数切换activate状态变量的值,用来触发刷新数据的操作。
在组件的返回部分,包含一个div元素、一个button元素和一个文本段落元素。点击button元素时,触发initiate函数,启动定时器,递减数字并显示在文本段落元素中。同时,根据activate状态变量的值决定是否显示文本段落元素。
需要注意的是,在每次点击按钮时,旧的定时器会被清除,然后重新创建一个新的定时器。这样可以避免多个重复的定时器同时存在。