String.prototype.repeat适合做省略号动画因其原生、轻量、可精确控制重复次数，如".".repeat(3)直接生成"..."，但需手动管理定时器生命周期与边界兼容性。
为什么 String.prototype.repeat 适合做省略号动画
它原生、无依赖、性能好，且能精确控制重复次数——比如 ".".repeat(3) 直接得 "..."，比拼接字符串或数组 join 更轻量。但注意：它不会自动清空或重置，动画逻辑得自己补。
用 setInterval 配合 repeat 实现逐帧增长
核心是维护一个计数器，每轮递增后调用 ".".repeat(n)，到上限再归零。常见错误是忘记清除定时器，或在组件卸载后继续更新 DOM 导致内存泄漏。
- 起始值设为
0，每次 +1，上限设为3（即最多显示三个点） - 用
textContent或innerText更新元素内容，避免innerHTML引入 XSS 风险 - 务必在退出动画时调用
clearInterval，尤其在 React/Vue 的useEffect或onUnmounted中
let count = 0;
const timer = setInterval(() => {
el.textContent = "Loading" + ".".repeat(++count % 4);
}, 300);
repeat 的边界行为和兼容性提醒
传入负数、NaN 或大于 2**31-1 的数会抛 RangeError；IE 完全不支持，需用 polyfill 或降级方案（如 Array(n+1).join(".")）。
- 安全写法：先
Math.max(0, Math.floor(n))处理非整数输入 - React 中若在
useState里直接用".".repeat(count)，要注意count为0时返回空字符串，别误判为“没渲染” - 服务端渲染（SSR）环境可能没有
String.prototype.repeat，Node.js 早期版本（
更可控的封装：返回可暂停/重启的动画函数
直接裸用 setInterval 灵活性差。封装成函数后，能随时暂停、跳转、重置，适合按钮加载态、表单提交等真实场景。
- 返回对象含
start()、stop()、reset()方法 - 内部用闭包保存
count和timer，避免全局污染 - 动画文本建议抽成参数，比如
prefix = "Processing"，方便复用
function createDotsAnimation(el, prefix = "Loading") {
let count = 0;
let timer = null;
return {
start() {
if (timer) return;
timer = setInterval(() => {
count = (count + 1) % 4;
el.textContent = `${prefix}${".".repeat(count)}`;
}, 300);
},
stop() {
clearInterval(timer);
timer = null;
},
reset() {
this.stop();
count = 0;
el.textContent = prefix;
}
};
}
实际用的时候，最易被忽略的是「动画状态与业务逻辑的同步」——比如请求已结束，但定时器还在跑，或者多个请求共用一个动画实例却没隔离状态。这类问题不靠 repeat 解决，得靠封装里的生命周期管理。 
