與SetInterval，SetTimeOut和Requestanimationframe卡住

Question

我是一種卡住的JavaScript定時器。我一直在閱讀的setInterval的使用，setTimeout的是糟糕，他們造成頁面重排與重繪，而是使用請求動畫幀

我卡住，無法找到我們如何能做到這一點

很好地解釋了一個資源

我想知道，怎樣才能使用requestAnimationFrame和setTimeout的替代setInterval的使用requestAnimationFrame

var x = 0; 
 

 
function SayHi() { 
 

 
    console.log("hi"); 
 
    console.log(x); 
 
    ++x 
 
    if (x >= 10) 
 
    clearInterval(intervalid); 
 
} 
 

 
var intervalid = setInterval(SayHi, 10);

我們怎樣才能REPL王牌使用requestAnimationFrame上面的代碼，我們怎樣才能清除它

function greetings(){ 
 
console.log("greetings to u"); 
 
} 
 

 
setTimeout(greetings,10);

，我們怎樣才能使用requestAnimationFrame上面的代碼替換setimeout。

如果有人可以解釋的差異，將有很大的幫助

感謝

Answer 1

• 的setTimeout（）做東西一段時間之後一次。
• setInterval（）反覆做東西每段時間後。
• requestAnimationFrame（）做東西一次當瀏覽器「準備」（重畫）。

它們是如何相同的？

你可以看到他們都想爲你做東西。

它們有什麼不同？

基本的區別是你的完成的時間和頻率。 setInterval（）就像setTimeout（）重複調用。另一方面，requestAnimationFrame（）就像setTimeout（）但在系統準備好時調用，而不是在（僞）固定時間之後調用。

如何requestAnimationFrame（）取代的setTimeout（）？

function greetings(timestamp) { 
    console.log("greetings to u"); 
} 
requestAnimationFrame(greetings); 

如何requestAnimationFrame（）取代的setInterval（）？

var x = 0; 
function SayHi(timestamp) { 
    console.log(++x); 
    if (x < 10) { 
     window.requestAnimationFrame(SayHi); 
    } 
} 
window.requestAnimationFrame(SayHi); 

這些都是超級根據您的示例代碼簡單的例子，但我希望它給你的東西的感覺。在requestAnimationFrame（）

Mozilla docs：

您還可以檢查出