詳解requestAnimationFrame和setInterval該如何選擇

Posted on by

正文

在Web前端開發中，使用計時器是實現動畫效果、周期性任務、定時器等常見操作的核心。JavaScript提供瞭兩種計時器：requestAnimationFrame和setInterval。雖然它們看起來很相似，但它們的工作方式卻有很大的不同。

requestAnimationFrame的工作方式

requestAnimationFrame是一種瀏覽器提供的API，它允許我們在瀏覽器的下一次重繪之前執行JavaScript代碼。這樣可以避免瀏覽器反復重繪，並提供更流暢的動畫效果。

當我們使用requestAnimationFrame時，瀏覽器會在下一次重繪之前調用我們提供的回調函數。回調函數中通常會更新動畫的狀態，並再次調用requestAnimationFrame以便在下一次重繪時更新動畫。

requestAnimationFrame的調用頻率通常為每秒60次。這意味著我們可以在每次重繪之前更新動畫的狀態，並確保動畫流暢運行，而不會對瀏覽器的性能造成影響。

使用requestAnimationFrame來創建一個動畫效果：

function animate() {
  // 更新動畫狀態
  // ...
  // 再次調用requestAnimationFrame
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

需要註意的是，由於requestAnimationFrame的調用頻率固定為每秒60次，因此如果我們在回調函數中進行復雜的計算，可能會導致動畫卡頓或者掉幀。因此，我們應該盡量避免在回調函數中進行過多的計算，並盡量使用CSS動畫來實現簡單的動畫效果。

setInterval的工作方式

setInterval是另一種JavaScript計時器，它可以讓我們在指定的時間間隔內重復執行一個操作。與requestAnimationFrame不同的是，setInterval不會考慮瀏覽器的重繪，而是按照指定的時間間隔執行回調函數。

需要註意的是，setInterval的調用頻率取決於指定的時間間隔。這意味著當瀏覽器正在忙於執行其他任務時，setInterval可能會被延遲執行，從而影響動畫的流暢度。

使用setInterval來每秒更新一次頁面上的時間：

function updateTime() {
  // 更新時間
  // ...
}
setInterval(updateTime, 1000);

需要註意的是，由於setInterval的調用頻率不固定，因此在實現動畫效果時可能會出現卡頓或者掉幀的情況。因此，我們應該盡量使用requestAnimationFrame來實現流暢的動畫效果。

requestAnimationFrame和setInterval之間的區別

雖然requestAnimationFrame和setInterval看起來很相似，但它們之間有一些重要的區別：

  • requestAnimationFrame會在瀏覽器的下一次重繪之前執行回調函數，而setInterval會按照指定的時間間隔重復執行回調函數。
  • requestAnimationFrame會自動考慮瀏覽器的重繪，避免不必要的重繪，提供更流暢的動畫效果。而setInterval則不會考慮瀏覽器的重繪，可能會導致不必要的重繪，影響性能。
  • requestAnimationFrame會在瀏覽器的後臺標簽頁中暫停，避免不必要的計算資源占用。而setInterval則會一直執行，可能會導致瀏覽器卡頓或者耗盡電池。

適用場景

根據上述分析，我們可以得出以下結論：

  • 如果需要周期性執行任務，且精度要求不高，可以使用setInterval。
  • 如果需要執行動畫或者周期性執行任務，且精度要求較高，可以使用requestAnimationFrame。
  • 對於一些不規律的任務，可以根據具體情況選擇合適的方式。

綜上所述，setInterval和requestAnimationFrame都有各自的優缺點，需要根據具體情況選擇合適的方式來執行任務。

寫在後面

在大多數情況下，我們應該使用requestAnimationFrame來實現動畫效果，因為它可以提供更流暢的動畫效果，並避免不必要的重繪和計算資源占用。而setInterval則更適合於需要按照指定時間間隔重復執行的操作，例如定時器和計時器等。

另外，我們還可以使用setTimeout來模擬requestAnimationFrame的效果。具體做法是在每次重繪之前使用setTimeout來調用我們的回調函數，從而實現與requestAnimationFrame類似的效果。

使用setTimeout來模擬requestAnimationFrame，需要在每次執行回調函數時，根據當前時間和上一次執行回調函數的時間計算出時間間隔，然後將該時間間隔傳遞給下一個setTimeout。具體實現如下：

let lastTime = 0;
function animate() {
    let currentTime = new Date().getTime();
    let timeInterval = Math.max(0, 16 - (currentTime - lastTime));// 計算時間間隔
    setTimeout(() => {
        console.log('Hello World!');
        lastTime = new Date().getTime();
        animate();
    }, timeInterval);
}
animate();

上述代碼會以每秒60幀的速度打印Hello World!，與requestAnimationFrame類似。

最後，需要註意的是，在實現動畫效果時，我們應該盡量減少頁面中的動畫數量和復雜度，避免影響瀏覽器的性能和用戶體驗。

以下是參考鏈接，感興趣的可以去瞭解下。

  • MDN – window.requestAnimationFrame()
  • MDN – window.setInterval()

以上就是requestAnimationFrame和setInterval該如何選擇的詳細內容，更多關於requestAnimationFrame setInterval的資料請關註WalkonNet其它相關文章！

推薦閱讀：