与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：

您还可以检查出