如何在setInterval打字效果完成后添加下一段交互？

核心实现思路 #

• 将完整文本拆分为独立段落数组，逐段处理打字动画
• 每段文本输出完成后显示「下一页」按钮，点击后触发下一段的打字效果
• 用clearInterval终止当前段落的定时器，避免内存泄漏

完整代码实现 #

<!-- HTML结构 -->
<button id="start-btn">开始阅读</button>
<h1 id="headline-text">冒险故事</h1>
<div id="game-adventure"></div>
<button id="next-btn" style="display: none;">下一页</button>

// 拆分后的段落文本
const paragraphs = [
  "在遥远的山谷里，住着一位年轻的探险家，他的名字叫林。从小他就听着山谷外的冒险故事长大，渴望有一天能亲自踏上旅途。",
  "这天清晨，林背着简单的行囊，告别了家乡的亲人，朝着山谷外的森林走去。阳光透过树叶的缝隙洒在地上，形成一片片金色的光斑。",
  "走着走着，他突然听到不远处传来奇怪的声响，像是某种动物的叫声，但又和他听过的所有声音都不一样。林握紧了手中的木棍，小心翼翼地朝着声音的方向靠近。"
];

const startBtn = document.getElementById("start-btn");
const headlineText = document.getElementById("headline-text");
const adventureContainer = document.getElementById("game-adventure");
const nextBtn = document.getElementById("next-btn");

let currentParaIndex = 0;
let charIndex = 0;
let typingTimer = null;

// 打字机核心函数
function startTyping() {
  const currentText = paragraphs[currentParaIndex];
  typingTimer = setInterval(() => {
    adventureContainer.innerHTML = currentText.slice(0, charIndex);
    charIndex++;

    // 当前段落输出完成时的处理
    if (charIndex > currentText.length) {
      clearInterval(typingTimer);
      nextBtn.style.display = "block";
    }
  }, 50);
}

// 开始按钮点击事件
startBtn.addEventListener("click", () => {
  startBtn.style.display = "none";
  headlineText.style.display = "none";
  startTyping();
});

// 下一页按钮点击事件
nextBtn.addEventListener("click", () => {
  nextBtn.style.display = "none";
  currentParaIndex++;
  charIndex = 0;

  if (currentParaIndex < paragraphs.length) {
    startTyping();
  } else {
    adventureContainer.innerHTML += "<br><br>故事结束！";
  }
});

关键细节说明 #

• 段落拆分：把长文本拆成数组paragraphs，方便逐段控制展示节奏
• 定时器管理：每段打字完成后必须清除定时器，防止多个定时器同时运行导致混乱
• 状态重置：点击「下一页」时，重置字符索引并切换到下一段落，保证新段落从第一个字开始输出
• 按钮显隐控制：初始隐藏「下一页」按钮，段落输出完成后显示，点击后再次隐藏，避免干扰阅读

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