詳解requestAnimationFrame和setInterval該如何選擇

更新時間：2023年03月30日 15:38:52 作者：forrest醬

這篇文章主要為大家介紹了requestAnimationFrame和setInterval該如何選擇示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>

正文

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

requestAnimationFrame的工作方式

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

當我們使用requestAnimationFrame時，瀏覽器會在下一次重繪之前調(diào)用我們提供的回調(diào)函數(shù)。回調(diào)函數(shù)中通常會更新動畫的狀態(tài)，并再次調(diào)用requestAnimationFrame以便在下一次重繪時更新動畫。

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

使用requestAnimationFrame來創(chuàng)建一個動畫效果：

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

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

setInterval的工作方式

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

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

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

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

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

requestAnimationFrame和setInterval之間的區(qū)別

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

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

適用場景

根據(jù)上述分析，我們可以得出以下結(jié)論：

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

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

寫在后面

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

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

使用setTimeout來模擬requestAnimationFrame，需要在每次執(zhí)行回調(diào)函數(shù)時，根據(jù)當前時間和上一次執(zhí)行回調(diào)函數(shù)的時間計算出時間間隔，然后將該時間間隔傳遞給下一個setTimeout。具體實現(xiàn)如下：

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

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

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