用 setinterval 模拟打字机效果最稳妥，需拆分文本、用索引控制节奏、及时 clearinterval，优先用 textcontent 防 xss，确保 dom 加载完成后再执行，并用状态机管理打字与删除双阶段。
用 setInterval 模拟打字机效果最稳妥
原生 HTML 不支持“打字机”这种动态效果，必须靠 JavaScript 控制字符逐个显示。用 setInterval 是最直接、兼容性最好、也最容易调试的方式——它不依赖现代 API（比如 requestAnimationFrame），老浏览器也能跑。
关键不是“怎么写动画”，而是“怎么控制节奏和边界”。常见错误是没清空定时器，导致多次触发后文字重复叠加或速度失控。
- 把目标文本拆成数组，用索引
i逐个拼接 - 每次执行前检查
i ，到头就 <code>clearInterval - 初始时把容器内容设为空字符串，避免残留
- 延迟时间建议从
100开始调，太小（如20）在低端设备上容易卡顿
textContent 比 innerHTML 更安全
如果只是纯文本打字，一律用 textContent 赋值。用 innerHTML 会引发 XSS 风险（哪怕你确定内容安全，框架或后续维护者可能误插变量），而且浏览器还要多做一次 HTML 解析，纯属拖慢速度。
只有明确需要渲染内联标签（比如某个词加粗）才考虑 innerHTML，但这时就得自己做转义或白名单过滤，复杂度陡增——90% 的打字机需求其实不需要格式。
- 用
document.getElementById('typewriter').textContent = currentText - 若真要保留简单样式，可先用
textContent渲染，再用 CSS 选中特定子元素加样式，而不是混在字符串里 - 别在循环里反复读取
textContent做判断，缓存初始值更稳
避免绑定到 window.onload 导致 DOM 找不到
很多人把打字脚本直接扔在 <script></script> 标签里，又没加任何加载保护，结果报错 Cannot set property 'textContent' of null——因为脚本执行时 DOM 还没解析完，getElementById 返回 null。
- 把脚本放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
