如何用 String.prototype.repeat 快速生成加载中动画的动态省略号-js教程-PHP中文网

string.prototype.repeat适合做省略号动画因其原生、轻量、可精确控制重复次数，如".".repeat(3)直接生成"..."，但需手动管理定时器生命周期与边界兼容性。

如何用 string.prototype.repeat 快速生成加载中动画的动态省略号

为什么 `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 解决，得靠封装里的生命周期管理。