用 setInterval 模拟打字机效果最稳妥，需拆分文本、用索引控制节奏、及时 clearInterval，优先用 textContent 防 XSS，确保 DOM 加载完成后再执行，并用状态机管理打字与删除双阶段。
用 setInterval 模拟打字机效果最稳妥
原生 HTML 不支持“打字机”这种动态效果，必须靠 JavaScript 控制字符逐个显示。用 setInterval 是最直接、兼容性最好、也最容易调试的方式——它不依赖现代 API（比如 requestAnimationFrame），老浏览器也能跑。
关键不是“怎么写动画”，而是“怎么控制节奏和边界”。常见错误是没清空定时器，导致多次触发后文字重复叠加或速度失控。
- 把目标文本拆成数组，用索引
i逐个拼接 - 每次执行前检查
i < text.length，到头就clearInterval - 初始时把容器内容设为空字符串，避免残留
- 延迟时间建议从
100开始调，太小（如20）在低端设备上容易卡顿
textContent 比 innerHTML 更安全
如果只是纯文本打字，一律用 textContent 赋值。用 innerHTML 会引发 XSS 风险（哪怕你确定内容安全，框架或后续维护者可能误插变量），而且浏览器还要多做一次 HTML 解析，纯属拖慢速度。
只有明确需要渲染内联标签（比如某个词加粗）才考虑 innerHTML，但这时就得自己做转义或白名单过滤，复杂度陡增——90% 的打字机需求其实不需要格式。
立即学习“前端免费学习笔记（深入）”；
- 用
document.getElementById('typewriter').textContent = currentText - 若真要保留简单样式，可先用
textContent渲染，再用 CSS 选中特定子元素加样式，而不是混在字符串里 - 别在循环里反复读取
textContent做判断，缓存初始值更稳
避免绑定到 window.onload 导致 DOM 找不到
很多人把打字脚本直接扔在 <script> 标签里，又没加任何加载保护，结果报错 Cannot set property 'textContent' of null——因为脚本执行时 DOM 还没解析完，getElementById 返回 null。
- 把脚本放在
</body>前是最省心的方案 - 或者用
document.addEventListener('DOMContentLoaded', ...)，比window.onload触发早 - 别用
$(document).ready()—— 如果没引入 jQuery，这句直接报错，还不好定位 - 加一行
if (!el) return;做兜底，比报错强
加删除效果要用两个阶段 + 双定时器
单纯“打出文字”很简单；但“打出→停顿→删掉→重打”这种常见组合，本质是状态机问题。硬塞进一个 setInterval 容易逻辑缠绕，推荐拆成两个独立定时器：一个负责打字，一个负责删除，用布尔标志位切换状态。
容易踩的坑是删除阶段没重置索引，导致第二次打字从中间开始；或者删除完没恢复初始状态，下次无法触发新文本。
- 定义状态变量：
let isDeleting = false; let i = 0; - 打字阶段：递增
i，直到满长；删除阶段：递减i，直到归零 - 删除完后手动设
isDeleting = false，并重置i = 0，否则下一轮打字失效 - 删除延迟一般设为打字延迟的 1.5–2 倍，视觉上更自然
