如何在Next.js中实现循环打字机效果？

你的打字机效果只执行一次，核心问题是用了全局变量控制索引，且仅在组件挂载时触发了一次打字逻辑，没有处理完成后的回退与重新启动流程。下面是适配React的循环打字机实现：

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

export default function Home() {
  const [currentText, setCurrentText] = useState("");
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isDeleting, setIsDeleting] = useState(false);
  const txt = "This is the text that will be typed.";
  const typeSpeed = 50;
  const deleteSpeed = 30; // 删除可以比打字快一点，也可以设成和typeSpeed一致

  useEffect(() => {
    const timer = setInterval(() => {
      if (!isDeleting) {
        // 打字阶段：逐步添加字符
        if (currentIndex < txt.length) {
          setCurrentText(prev => prev + txt.charAt(currentIndex));
          setCurrentIndex(prev => prev + 1);
        } else {
          // 打字完成，切换到删除模式
          setIsDeleting(true);
        }
      } else {
        // 删除阶段：逐步移除字符
        if (currentIndex > 0) {
          setCurrentText(prev => prev.slice(0, -1));
          setCurrentIndex(prev => prev - 1);
        } else {
          // 删除完成，切换回打字模式
          setIsDeleting(false);
        }
      }
    }, isDeleting ? deleteSpeed : typeSpeed);

    return () => clearInterval(timer);
  }, [currentIndex, isDeleting, txt, typeSpeed, deleteSpeed]);

  return (
    <main>
      <section>
        <section>
          <p id="header-message">{currentText}</p>
        </section>
        <section></section>
      </section>
    </main>
  );
}

关键修改点： #

• 用React状态currentText、currentIndex、isDeleting替代全局变量，确保状态变化能触发组件重新渲染
• 拆分打字和删除两个阶段：打字到文本末尾后自动切换到删除模式，删除完所有字符后再回到打字模式，形成循环
• 给删除阶段单独设置速度，优化视觉体验（也可以和打字速度保持一致）
• 依赖数组包含所有用到的状态和变量，保证定时器能正确响应状态变化
• 组件卸载时清理定时器，避免内存泄漏

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