javascript - 卡在 SetInterval 、 SetTimeOut 和 Requestanimationframe

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);

我们如何将上面代码中的 setimeout 替换为 requestanimationframe。

如果有人能解释其中的区别，那将有很大帮助

谢谢

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);

这些是基于您的示例代码的非常简单的示例，但我希望它能让您有所了解。

您还可以查看:Mozilla docs在 requestAnimationFrame()

上