JavaScript 動畫幀率校正：setTimeout 扣除執行時間實現近似固定週期

代碼解析

function animate() {
    var start = +new Date();           // 幀開始時間戳
    // ... 動畫邏輯執行 ...
    var finish = +new Date();          // 幀結束時間戳
    setTimeout(animate, 1000 - (finish - start)); // 下一幀延遲 = 目標週期 - 耗時
}

原理

• 目標：每秒執行一次 (1000ms 週期)。
• 動畫邏輯本身耗時 `finish - start` 毫秒。
• 若固定 `setTimeout(animate, 1000)`，實際週期 = `1000 + 耗時`，隨時間漂移。
• **扣除耗時**：下一次延遲 = `1000 - 耗時`，補償執行開銷，使**平均週期接近 1000ms**。

局限性

• `setTimeout` **非精確計時器**，最小延遲受瀏覽器/系統排程影響 (通常 4ms+)。
• 若耗時 > 1000ms，延遲變負數 → 立即執行 → 掉幀。
• 頁面切換至背景分頁，瀏覽器會節流 `setTimeout` (最低 1000ms)。

現代最佳實踐：requestAnimationFrame

function animate(time) {
    // time 為瀏覽器提供的高精度時間戳 (performance.now())
    // ... 動畫邏輯 ...
    requestAnimationFrame(animate); // 瀏覽器自動對齊螢幕重繪率 (通常 60fps)
}
requestAnimationFrame(animate);

• 自動同步螢幕刷新率，無需手動計算延遲。
• 背景分頁自動暫停，省電。
• 參數 `time` 可用於物理動畫插值 (如 `delta = time - lastTime`)。

結論

教學代碼展示**補償邏輯**概念，但實務開發**請直接使用 `requestAnimationFrame`**，更簡潔、高效、省電。