Question

我有点坚持使用javascript计时器。我一直在阅读setInterval的用法，setTimeOut是坏的，它们导致页面重排和重绘，而是使用请求动画帧

我陷入困境，无法找到一个资源，并且很好地解释了我们如何做到这一点

我想知道，我们如何用requestanimationframe替换setinterval，用requestanimationframe替换settimeout

var x = 0;

function SayHi() {

  console.log("hi");
  console.log(x);
  ++x
  if (x >= 10)
    clearInterval(intervalid);
}

var intervalid = setInterval(SayHi, 10);

我们如何用requestanimationframe替换上面的代码，我们如何清除它

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

我们如何使用requestanimationframe替换上述代码中的setimeout。

如果有人可以解释这种差异，那将会有很大的帮助

由于

Answer 1

setTimeout（）在一段时间后执行某事。
setInterval（）在每段时间后反复执行某事。

＆＃34;准备好＆＃34;

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

坚持使用SetInterval，SetTimeOut和Requestanimationframe

1 个答案: