JavaScript实现打字机效果：控制文本输出与后续交互流程

/**
 * 实现打字机效果
 * @param {string} text 要显示的完整文本
 * @param {HTMLElement} elem 显示文本的DOM元素
 * @param {number} delay 每个字符显示的时间间隔 (毫秒)
 * @param {Function} nextStep 文本完全显示后执行的回调函数
 */
function typeIt(text, elem, delay, nextStep) {
  let index = 0; // 当前显示到文本的索引

  const type = () => {
    index++; // 移动到下一个字符

    // 如果所有字符都已显示
    if (index > text.length) {
      nextStep(); // 执行后续步骤
      return; // 停止递归
    }

    // 更新DOM元素内容，显示当前长度的文本
    elem.innerHTML = text.slice(0, index);
    // 调度下一次字符的显示
    window.setTimeout(type, delay);
  };

  // 立即开始打字效果
  type();
}

// 假设HTML中有一个用于显示文本的div
// <div id="game-adventure"></div>
const textDisplayElement = document.querySelector("#game-adventure");
const paragraphText = '欢迎来到冒险世界！请点击“下一段”继续旅程。';

// 示例：启动打字效果，完成后显示“下一段”按钮
typeIt(paragraphText, textDisplayElement, 100, () => {
  console.log('文本已完全显示！');
  // 在这里添加显示“下一段”按钮的逻辑
  const nextButton = document.createElement('button');
  nextButton.textContent = '下一段';
  nextButton.id = 'next-paragraph-btn';
  textDisplayElement.parentNode.appendChild(nextButton); // 将按钮添加到文本元素下方

  nextButton.addEventListener('click', () => {
    alert('你点击了下一段！可以开始显示新的内容了。');
    // 隐藏按钮，清空当前文本，准备显示下一段
    nextButton.style.display = 'none';
    textDisplayElement.innerHTML = '';
    // 假设有新的文本
    // typeIt('这是第二段内容...', textDisplayElement, 100, () => { /* 第二段完成后的操作 */ });
  });
});

/**
 * 实现打字机效果 (使用 setInterval)
 * @param {string} text 要显示的完整文本
 * @param {HTMLElement} elem 显示文本的DOM元素
 * @param {number} delay 每个字符显示的时间间隔 (毫秒)
 * @param {Function} nextStep 文本完全显示后执行的回调函数
 */
function typeItWithInterval(text, elem, delay, nextStep) {
  let index = 0; // 当前显示到文本的索引
  let timer;     // 用于存储 setInterval 的ID，以便清除

  const type = () => {
    index++; // 移动到下一个字符

    // 如果所有字符都已显示
    if (index > text.length) {
      window.clearInterval(timer); // 清除定时器，停止循环
      nextStep(); // 执行后续步骤
      return;
    }

    // 更新DOM元素内容
    elem.innerHTML = text.slice(0, index);
  };

  // 启动定时器
  timer = window.setInterval(type, delay);
  // 立即执行一次，确保第一个字符尽快显示
  type();
}

// 假设HTML中有一个用于显示文本的div
// <div id="game-adventure"></div>
const textDisplayElementInterval = document.querySelector("#game-adventure");
const paragraphTextInterval = '这是使用setInterval实现的打字机效果。';

// 示例：启动打字效果，完成后显示“下一段”按钮
typeItWithInterval(paragraphTextInterval, textDisplayElementInterval, 100, () => {
  console.log('setInterval 文本已完全显示！');
  // 在这里添加显示“下一段”按钮的逻辑
  const nextButton = document.createElement('button');
  nextButton.textContent = '下一段 (Interval)';
  nextButton.id = 'next-paragraph-btn-interval';
  textDisplayElementInterval.parentNode.appendChild(nextButton);

  nextButton.addEventListener('click', () => {
    alert('你点击了下一段 (Interval)！');
    nextButton.style.display = 'none';
    textDisplayElementInterval.innerHTML = '';
  });
});