使用 useEffect 钩子清除 React 中的超时循环

Question

我在 Javacript (React) 中有以下代码：

useEffect(() => {
    const timer1 = setTimeout(() => {
      // task 1
    }, 1000)

    const timer2 = setTimeout(() => {
      // task 2
    }, 2000)

    const timer3 = setTimeout(() => {
      // task 3
    }, 3000)

    // returns to the first task and starts all over again

    return () => {
      clearTimeout(timer1)
      clearTimeout(timer2)
      clearTimeout(timer3)
    }
  }, [])

我的问题是：如何做到一旦所有超时都执行到最后一个，我就调用它们重新执行？我只需要多次运行这个超时序列。 我尝试将所有 setTimeouts 放入一个函数中并在 useEffect 中调用它们，但我无法在钩子内正确清除超时。

流程示例：

• 1秒后：timer1执行任务1
• +1 秒后：timer2 运行任务 2
• +1 秒后：timer3 运行任务 3
• 从定时器 1 开始重新启动流程。

Answer 1

第三次超时完成循环后，您可以清除间隔持续时间。

例如：

useEffect(() => {
  const intervalDuration = 3000;     
  const interval = setInterval(() => {
    setTimeout(() => {
      // task 1 logic here
    }, 1000);

    setTimeout(() => {
      // task 2
    }, 2000);

    setTimeout(() => {
      // task 3
    }, 3000);
  }, intervalDuration);

  return () => {
    clearInterval(interval);
  };
}, []);

Answer 2

让我给你一个想法。您所需要的只是在最后一个计时器完成后重新运行

useEffect

。

您可以拥有一个最后可以修改的状态并将其作为依赖项传递给

useEffect

。

  const [timerCount, setTimerCount] = useState(0);

  useEffect(() => {
    console.log("Starting new set of timers");
    const timer1 = setTimeout(() => {
      // task 1
      console.log("Task 1");
    }, 1000);

    const timer2 = setTimeout(() => {
      // task 2
      console.log("Task 2");
    }, 2000);

    const timer3 = setTimeout(() => {
      // task 3
      console.log("Task 3");

      setTimerCount((prev) => prev + 1);
    }, 3000);

    return () => {
      console.log("Killing all timers");
      clearTimeout(timer1);
      clearTimeout(timer2);
      clearTimeout(timer3);
    };
  }, [timerCount]);