如何实现JavaScript打字动画永久循环，结束后延迟3秒？

嘿，刚好能帮你解决这个循环打字的需求！其实只需要把原来的打字逻辑封装成可重复调用的函数，再配合定时器实现延迟重启就行，完全不用动HTML和CSS，保留你原来的动画效果。

具体修改方案： #

核心JavaScript修改（直接替换原JS代码即可）

const typewriter = document.getElementById('typewriter');
const targetText = "这里替换成你要展示的指定文本"; // 保持你原来的目标文本
const typeSpeed = 150; // 原打字速度不变，按需调整

// 把打字逻辑封装成函数，方便重复调用
function startTyping() {
  let charIndex = 0;
  // 每次开始前清空内容，重置状态
  typewriter.textContent = '';
  typewriter.style.borderRight = '2px solid #000'; // 恢复光标样式

  const typingTimer = setInterval(() => {
    if (charIndex < targetText.length) {
      typewriter.textContent += targetText.charAt(charIndex);
      charIndex++;
    } else {
      clearInterval(typingTimer);
      // 打字结束后隐藏光标（可选，看你喜好）
      typewriter.style.borderRight = 'none';
      // 延迟3秒后重新启动打字动画，实现无限循环
      setTimeout(startTyping, 3000);
    }
  }, typeSpeed);
}

// 初始化启动第一次动画
startTyping();

为什么这么改？ #

1. 封装函数：把原本一次性执行的打字代码放进startTyping函数里，这样我们可以随时调用它重启动画。
2. 重置状态：每次调用函数时先清空容器内容、恢复光标，保证新一轮动画从干净的状态开始。
3. 延迟重启：当打字到最后一个字符时，先清除当前的打字定时器，然后用setTimeout等待3秒，再调用startTyping函数，这样就形成了无限循环。
4. 保留原效果：HTML和CSS完全不用改，原来的打字速度、光标样式这些动画细节都能完整保留。

这样改完之后，你的侧边栏打字动画就会一直循环播放，每次结束后停3秒再重新开始，完全符合你的需求～

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