詳解requestAnimationFrame和setInterval該如何選擇

2023-03-31 06:01:25

正文

在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類似。

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

以下是參考連結，感興趣的可以去了解下。

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