JS实现打字机效果时typeWriter函数传参报错问题排查

核心报错原因 #

• setTimeout(typeWriter, speed) 调用时未传入函数依赖的text、speed形参，定时器触发执行typeWriter时，两个参数值均为undefined，访问text.length直接抛出类型错误。
• 原有for循环批量创建定时器的逻辑存在时序问题：循环会在主线程瞬间执行完成，所有注册的定时器几乎同时触发，无法实现逐字间隔输出的效果，切换文本时还会出现多打字任务叠加冲突的问题。

修复后可直接复用的代码 #

HTML部分（确认已有元素） #

<p id="demo"></p>
<button id="switchBtn">切换输出文本</button>

JS部分 #

// 存储定时器ID，用于切换文本时中断上一个打字任务
let typingTask = null;
const targetEl = document.getElementById("demo");

/**
 * 可动态传参的打字机函数
 * @param {string} text 待逐字输出的目标文本
 * @param {number} speed 单字输出间隔，单位毫秒
 */
function typeWriter(text, speed) {
  // 启动新任务前先清空内容、终止未完成的旧打字任务
  clearTimeout(typingTask);
  targetEl.innerHTML = "";
  let currentIndex = 0;

  // 内部递归实现逐字输出，替代原有的for循环逻辑
  function printChar() {
    if (currentIndex < text.length) {
      targetEl.innerHTML += text.charAt(currentIndex);
      currentIndex++;
      typingTask = setTimeout(printChar, speed);
    }
  }

  printChar();
}

// 页面加载完成自动输出第一段文本
window.addEventListener("DOMContentLoaded", () => {
  typeWriter("Lorem impsum", 50);
})

// 按钮点击清空原有内容，输出第二段文本
document.getElementById("switchBtn").addEventListener("click", () => {
  // 此处替换为你需要的text2内容即可
  typeWriter("这是点击按钮后要输出的第二段文本", 50);
})

实现说明 #

• 采用内部递归的方式触发下一个字的输出，每次输出完当前字才注册下一次的定时器，能精准控制逐字输出的间隔。
• 每次调用typeWriter时都会先终止之前未完成的打字任务、清空容器内容，不会出现多段文本叠加输出的问题。
• 函数支持任意传入目标文本和输出速度，不需要硬编码固定文本，完全满足页面加载、按钮点击两种场景下输出不同文本的需求。

内容的提问来源于stack exchange，提问作者82.pb