在使用定时器时，关闭后重新开启，定时器显示有问题怎么解决

问题：在使用定时器时，关闭后重新开启，定时器显示会很快速的显示

解决：在开启当前定时定时器时，关闭上一个定时器

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状态变量的值决定是否显示文本段落元素。

需要注意的是，在每次点击按钮时，旧的定时器会被清除，然后重新创建一个新的定时器。这样可以避免多个重复的定时器同时存在。