為什麼requestAnimationFrame 比setInterval 或setTimeout 更好

雖然setInterval 和setTimeout 都可以用於動畫任務，但出於多種原因，requestAnimationFrame 通常被認為是更好的選擇。

1。與顯示更新率同步

requestAnimationFrame 將其回調與裝置的顯示更新率同步，通常為 60Hz。這意味著動畫以一致的幀速率更新，消除了 setInterval 或 setTimeout 可能出現的抖動和斷斷續續。

2。減少資源消耗

setInterval 和 setTimeout 按指定的時間間隔呼叫它們的回調，即使瀏覽器沒有主動渲染也是如此。這可能會導致不必要的 CPU 使用和電池消耗。而 requestAnimationFrame 僅在瀏覽器即將顯示新幀時調用其回調，從而節省資源。

3.增強的使用者體驗

與使用 setInterval 或 setTimeout 的動畫相比，由 requestAnimationFrame 提供支援的動畫感覺更流暢且響應更快。這是因為 requestAnimationFrame 會考慮裝置的更新率並確保動畫以一致的、視覺上令人愉悅的速度運行。

4. Timestamp 的可用性

requestAnimationFrame 為其回調提供了一個時間戳參數，該參數表示幀計劃顯示的時間。此時間戳可用於計算自上一幀以來經過的時間，從而實現更精確的動畫控制和平滑的過渡。

5.消除剪切和閃爍

requestAnimationFrame 解決了setInterval 或setTimeout 可能出現的剪切（動畫位置不匹配）和閃爍（顯示不完整的幀）等問題。這是因為它僅在當前幀完全呈現在螢幕上時才調度下一幀渲染。

綜上所述，requestAnimationFrame 是動畫任務的首選，因為它與顯示刷新率同步，減少了資源消耗、增強的用戶體驗、時間戳的可用性以及消除剪切和閃爍。