如何在React组件中使用setInterval实现循环间隔暂停？

需求说明 #

组件加载完成后，每100ms执行一次任务，连续完成3次后暂停1秒，之后无限重复该模式，期望输出：

1 // 暂停100ms
2 // 暂停100ms
3 // 暂停100ms
// 暂停1秒
... 重复上述流程

原代码问题分析 #

你提供的代码存在以下问题：

• 第二个setInterval仅会执行一次清除操作，无法实现"暂停后重启"的循环逻辑
• 计数器i达到3后没有正确重置并触发下一轮任务流程
• 两个独立定时器的逻辑没有协同，导致任务执行流程混乱

正确实现代码 #

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    let cycleTimeoutId;
    let taskTimeoutId;

    // 封装一轮完整流程：3次任务执行 + 1秒暂停
    function runCycle() {
      let count = 0;

      // 执行单次任务并控制流程
      function executeTask() {
        count++;
        console.log(count);
        
        if (count < 3) {
          // 未完成3次任务，100ms后执行下一次
          taskTimeoutId = setTimeout(executeTask, 100);
        } else {
          // 完成3次任务，1秒后启动下一轮循环
          cycleTimeoutId = setTimeout(runCycle, 1000);
        }
      }

      // 启动当前轮次的任务
      executeTask();
    }

    // 组件加载后启动第一轮循环
    runCycle();

    // 组件卸载时清除所有定时器，避免内存泄漏
    return () => {
      clearTimeout(taskTimeoutId);
      clearTimeout(cycleTimeoutId);
    };
  }, []);

  return <div>任务运行中...</div>;
}

export default MyComponent;

代码逻辑说明 #

• 用runCycle函数封装一轮完整的执行流程，每次完成3次任务后，通过1秒的定时器触发下一轮循环
• executeTask负责单次任务执行与计数，根据当前计数判断是继续执行下一次任务，还是触发暂停后的下一轮循环
• 在useEffect的清理函数中清除所有定时器，确保组件卸载后不会有残留的定时器继续运行，避免内存泄漏

内容的提问来源于stack exchange，提问作者grabury