在 React 中如何使用定时器

在React中使用定时器通常有两种方式:使用setIntervalsetTimeout函数。

  1. 使用setInterval函数:

首先,在组件中导入useEffectuseState函数:

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

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

        const [timerId, setTimerId] = useState(null);

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

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

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

  1. 使用setTimeout函数:

首先,在组件中导入useEffectuseState函数:

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

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

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

在点击文本段落元素时,initiate 函数会被调用,定时器开始启动,每隔1秒递增数字并更新到状态变量中。文本段落元素会显示递增的数字。

你可能感兴趣的:(react.js,javascript,前端)