正确做法是用 span 包裹按钮文字并仅对其 textContent 逐字更新，避免直接操作 button.innerHTML；CSS 用 width + steps() 配 inline-block，光标用 border-right + blink 动画，交互时需清理定时器并同步 aria-busy 状态。
按钮上直接加打字机效果，别用 innerHTML +=
按钮文字做打字机效果，本质是让 textContent 逐字出现，但千万别在 button 上反复拼接字符串——这会触发重排、丢失焦点、破坏可访问性（如屏幕阅读器读错），而且点击态（:active）可能被中断。
正确做法是：用一个 span 包住按钮内文字，只对这个 span 做动画或 JS 控制；按钮本身保持语义完整、事件绑定正常。
- HTML 结构示例：
<button type="button"><span class="typewriter-text">加载中...</span></button> - CSS 方案优先用
width + steps()，但必须设display: inline-block，否则width对span无效 - JS 方案里，每次只更新
span.textContent，而非整个button.innerHTML - 若按钮有图标（比如
<svg>），确保它和span同级且不参与动画，避免布局抖动
steps() 参数必须等于实际字符数，含空格和标点
很多人写 steps(10, end) 却没数清 “加载中...” 是 5 个汉字 + 3 个英文点，共 8 字符。参数错，动画就会跳字或卡住——不是浏览器 bug，是 steps() 严格按步数切帧。
- 中文全角字符、英文半角、Emoji（如 ✅）、省略号
…都算 1 个字符；但 HTML 实体如 - 推荐用 JS 预计算：
const chars = "加载中...".length，再动态写入 CSS 自定义属性，或生成对应@keyframes - 如果文案后期可能变（比如多语言切换），硬写死
steps(8)就不可靠，此时 JS 方案更稳 - 注意：CSS 中不能用
steps(calc(10 + 2))，calc()在steps()内无效
光标别用 ::after，改用 border-right
按钮上伪元素 ::after 模拟光标，在 Safari 和部分安卓 WebView 里常不同步、闪烁延迟甚至消失。根本原因是伪元素不继承父元素的 steps() 动画节奏，且按钮内联样式易被覆盖。
立即学习“前端免费学习笔记（深入）”；
- 更可靠的做法：给
.typewriter-text加border-right: 2px solid currentColor，再单独配一个blink动画控制显隐 - 动画必须用
step-end（不是linear），否则光标会在字符中间“停顿”，看起来像卡顿 - 别设
border-right-color: transparent来隐藏——透明边框仍占渲染空间，可能导致按钮宽度微变；应直接border-right: none+ 动画切换 - 如果按钮有
padding，光标位置要靠box-sizing: border-box对齐，否则边框会撑出额外像素
用户交互时暂停/恢复必须清除定时器上下文
按钮带打字效果，往往需要鼠标悬停暂停、点击后跳过、或加载失败重置——这时 JS 的 setTimeout 若没清理干净，会出现多个定时器并发、文字乱序、甚至内存泄漏。
- 每次启动打字前，先
clearTimeout(this.timerId)（假设你把 ID 存在实例上） - 暂停不是停止，而是暂存当前
i索引值；恢复时从该位置继续，而不是重头开始 - 按钮被禁用（
disabled）时，自动暂停；重新启用时不应自动恢复，除非明确调用恢复函数 - 若按钮文案含 HTML 标签（比如强调词
<strong>关键</strong>），别用textContent——得用innerHTML并提前转义，否则 XSS 风险
最易被忽略的是：按钮的可访问性状态（aria-busy）必须随打字过程同步更新。光标闪着，但屏幕阅读器不知道还在“打字中”，这是真实 WCAG 不合规点。
