JavaScript逐字打字效果函数封装后失效问题排查

你封装的typeWriter函数无法正常工作，核心是几个逻辑错误：

• 同步循环和异步延时逻辑冲突：for循环是同步执行的，会在代码运行的瞬间跑完所有轮次，完全不会等待setTimeout设置的120ms延迟，根本做不到逐字间隔打印的效果。
• 递归调用缺参数：循环内的setTimeout(typeWriter, speed)没有给typeWriter传入txt参数，第一次触发递归时txt就会变成undefined，后续取字符的逻辑直接失效。
• 全局索引混乱：把计数用的i定义为全局变量，递归执行时索引值会被反复覆盖，没法正确追踪当前要打印的字符位置。
• 无终止判断：函数没有设置打印完成的退出条件，哪怕文本全部打完也会无限递归空跑，浪费性能甚至引发页面卡顿。

你原本能正常运行的frameLooper逻辑本身是对的，核心思路是每次只处理1个字符，处理完再延时触发下一次处理，不要把同步循环和异步延时混着写。修复后的通用函数代码如下：

const speed = 120;
function typeWriter(txt, currentIndex = 0) {
  const targetDom = document.getElementById("type_text");
  // 所有字符打印完成，直接终止
  if (currentIndex >= txt.length) return;
  
  // 追加当前位置的字符
  targetDom.innerHTML += txt.charAt(currentIndex);
  // 延时后打印下一个字符，明确传入文本和下一个字符的索引
  setTimeout(() => {
    typeWriter(txt, currentIndex + 1);
  }, speed);
}

// 函数调用
typeWriter("text to be typed");

这个版本做了几个针对性调整：

• 移除了同步for循环，每次函数执行只打印1个字符，打印完成才延时触发下一次调用，保证每个字符的打印间隔完全匹配设置的speed值
• 把字符索引设为函数的默认参数，不用全局变量存储计数，避免索引值被意外污染
• 每次递归调用都明确传入完整文本和下一个字符的索引，不会出现参数缺失为undefined的问题
• 增加了终止判断：当索引超过文本总长度时直接退出，不会出现无限递归空跑的问题

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