进度条要由真实进度驱动

更新于 2026-09-21

**「点击后加载动画」不能用无限循环动画假装：要么绑定真实加载状态，要么基于经过时间连续推进。用 rAF 的帧间隔（`dt ≈ 16ms`）去判断 60ms 定时器，条件永远不成立。**

一、需求本身有四个约束

const dt = now - last;   // ≈ 16ms（两帧间隔）
last = now;              // 每帧都重置
if (dt >= TICK_MS) {     // 16 >= 60 → 永远 false
  setProgress(...)
}

两个叠加错误：

真正把进度推到 100% 的是 pathname effect 里的一次性赋值。于是视觉上就是 0 → 100%，中间没有任何帧 —— 这就是"固定时间快速闪过、与加载不同步"。

正确做法：按经过时间做连续计算（elapsed / duration），而不是用帧间隔做定时判定。

用 MutationObserver 观察 style 变化来采样进度，只拿到 4 个点 —— 因为 rAF 每帧写入相同的值会被浏览器合并，只有真正变化的属性才触发。要验证中间帧，得连续读取，不能依赖观察器。