用javascript实现打字机效果需逐字符插入文本节点，清空目标元素后通过setinterval拼接字符到textcontent，维护外部索引i，间隔100–200ms，末尾调用clearinterval。
直接用 JavaScript 控制字符逐个插入即可，不需要第三方库，但要注意 DOM 更新时机和光标闪烁逻辑。
用 setInterval 逐字写入文本节点
核心是把目标文字拆成数组，用 setInterval 每次拼接一个字符到 textContent 或 innerHTML。注意别用 innerText，它会触发重排，且对空格/换行处理不一致。
- 起始前清空目标元素内容，避免重复叠加
- 索引变量必须在闭包或外部作用域中维护，不能每次回调都重置
- 间隔时间建议设为
100–200ms，太短人眼难辨，太长像卡顿 - 到达末尾后记得
clearInterval，否则持续占用定时器
const el = document.getElementById('typewriter');
const text = 'Hello, world!';
let i = 0;
const timer = setInterval(() => {
if (i
<h3>添加动态光标效果（|）</h3>
<p>纯文字打字不够真实，需模拟“光标”——常见做法是在输出末尾加一个竖线 <code>|</code>，并让它闪烁。关键点在于：光标不是独立 DOM 节点，而是和文字拼在一起更新；闪烁要用另一个定时器，且需与打字节奏解耦。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件"><img
src="https://img.php.cn/upload/manual/000/000/010/170901721079108.gif" alt="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="overflowclass">使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件</a>
<p class="overflowclass">如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更</p>
</div>
<a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
- 打字阶段：每次更新时拼上
|，如text.slice(0, i + 1) + '|' - 打字结束瞬间：再启一个
setInterval控制|的显隐（比如每 500ms 切换一次） - 避免用
visibility: hidden切换，直接替换字符串更可靠（防止布局抖动） - 若用
innerHTML，确保文本不含 HTML 特殊字符，否则要先escape
用 requestAnimationFrame 替代 setInterval 更平滑？
理论上可以，但实际没必要。打字效果本质是非实时交互，帧率稳定性要求远低于动画；而 requestAnimationFrame 依赖屏幕刷新率（通常 60fps），反而会让间隔不均（比如想 150ms 一帧，但 RAF 只能按 ~16.7ms 步进）。多数场景下 setInterval 更可控、更易调试。
- 除非你正在做一个需要和滚动/动画严格同步的富文本编辑器内嵌效果，否则不用强切 RAF
- 若真要用，得自己做时间差累积逻辑，复杂度陡增，收益极小
- 移动端低端机上，
setInterval的兼容性和表现反而更稳
中文、Emoji 或富文本会出问题吗？
会。JavaScript 的 .length 对中文字符基本准确（UTF-16 编码下大部分汉字占 1 个 code unit），但对 Emoji（尤其是带修饰符的，如 ??）或某些组合字符会误判长度。例如 '??'.length 是 4，不是 1。
- 安全做法：用
Array.from(text)代替text.split('')，它能正确处理 Unicode 字符 - 如果内容含 HTML 标签（比如想加粗某个词），不要直接插进
innerHTML——先用textContent渲染纯文本，再用 DOM 方法手动构建结构，否则易被 XSS 或解析错乱 - 服务端返回的文本若含换行符
\n，浏览器默认不渲染，需转成<br>或用white-space: pre-line
最常被忽略的是：打字结束后，光标状态没复位（比如用户刷新页面后再次进入，定时器可能残留）；还有在 SPA 中，组件卸载时没清理 setInterval，造成内存泄漏。这些地方不报错，但影响长期稳定性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
