requestAnimationFrame（）指南

學習API以可預測的方式執行動畫和安排事件

requestAnimationFrame()是相對較新的瀏覽器API。它提供了一種更可預測的方式來連接瀏覽器渲染週期。

當前所有現代瀏覽器（和IE 10+）都支持它。

Browser support

它不是特定於動畫的API，但是使用最多的地方是動畫。

JavaScript有一個事件循環。它持續運行以執行JavaScript。

過去，動畫是使用setTimeout()或者setInterval()。您執行了一點動畫，然後調用setTimeout()從現在起幾毫秒內再次重複此代碼：

const performAnimation = () => {
  //...
  setTimeout(performAnimation, 1000 / 60)
}
setTimeout(performAnimation, 1000 / 60)

或者

const performAnimation = () => {
  //...
}
setInterval(performAnimation, 1000 / 60)

您可以通過獲取超時或間隔參考並清除動畫來停止動畫：

let timer
const performAnimation = () => {
//…
  timer = setTimeout(performAnimation, 1000 / 60)
}
timer = setTimeout(performAnimation, 1000 / 60)
//…

clearTimeout(timer)

這1000 / 60之間的間隔performAnimation()呼叫取決於監視器的刷新率，在大多數情況下，刷新率是60 Hz（每秒60次重繪），因為如果監視器由於其限製而無法顯示重繪，則執行重繪是無用的。這樣一來，我們就有大約16.6ms的時間來顯示每個幀。

這種方法的問題在於，即使我們精確地指定了此精度，瀏覽器仍可能忙於執行其他操作，而setTimeout調用可能無法及時進行重新繪製，因此它將延遲到下一個週期。

這很不好，因為我們丟了一幀，然後在下一幀動畫執行了2次，導致眼睛注意到笨拙的動畫。

在一個小故障上檢查此示例使用setTimeout（）構建的動畫。

requestAnimationFrame是執行動畫的標準方法，儘管代碼看起來與setTimeout / setInterval代碼非常相似，但事件的處理方式卻非常不同：

let request
const performAnimation = () => {
request = requestAnimationFrame(performAnimation)
//animate something
}
requestAnimationFrame(performAnimation)
//…

cancelAnimationFrame(request) //stop the animation