如何在React Hooks中使用setInterval和setTimeout实现循环字符串逐字输出

需求说明 #

• 遍历指定字符串数组
• 选中数组中的新字符串后，每0.1秒输出该字符串的一个子串（实现逐字显示效果）
• 字符串完全输出后暂停1秒，再切换到数组下一个字符串
• 重复上述过程循环执行

示例效果（数组为['one', 'two']）：

o
on
one
// 暂停1秒
t
tw
two
// 暂停1秒
o
on
one
// 暂停1秒……

遇到的问题 #

我尝试了以下React代码，但它仅循环执行一次：

useEffect(() => {
  let i = 0

  function increment() {
    i++
    console.log(i)
  }

  const incrementTimer = setInterval(increment, 100)

  setInterval(() => {
    clearInterval(incrementTimer)
  }, 1000)
}, [])

原代码只完成了单次计数与定时器清理，未实现数组循环切换和逐字输出的完整逻辑。可以通过递归结合定时器的方式实现需求：

useEffect(() => {
  const texts = ['one', 'two'];
  let textIndex = 0; // 当前处理的字符串索引
  let charIndex = 0; // 当前输出的字符位置

  function typeText() {
    const currentText = texts[textIndex];
    // 输出当前子串
    console.log(currentText.slice(0, charIndex + 1));
    charIndex++;

    // 当前字符串输出完成时
    if (charIndex >= currentText.length) {
      charIndex = 0;
      // 切换到下一个字符串，取模实现循环遍历
      textIndex = (textIndex + 1) % texts.length;
      // 暂停1秒后开始下一个字符串的输出
      setTimeout(typeText, 1000);
    } else {
      // 0.1秒后输出下一个字符
      setTimeout(typeText, 100);
    }
  }

  // 启动逐字输出流程
  const timer = setTimeout(typeText, 0);

  // 组件卸载时清理定时器，避免内存泄漏
  return () => clearTimeout(timer);
}, []);

逻辑说明 #

• 用textIndex跟踪当前要输出的字符串，charIndex跟踪当前输出到字符串的第几个字符
• 每次调用typeText时，输出当前字符串的前charIndex+1个字符
• 当前字符串输出完成后，重置charIndex，切换到下一个字符串（通过取模实现循环遍历），并延迟1秒后继续
• 未完成当前字符串输出时，延迟0.1秒继续输出下一个字符

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