卡在 SetInterval 、 SetTimeOut 和 Requestanimationframe答案

【问题标题】：Stuck with SetInterval ,SetTimeOut and Requestanimationframe卡在 SetInterval 、 SetTimeOut 和 Requestanimationframe
【发布时间】：2017-03-23 19:01:01
【问题描述】：

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

我被困住了，找不到一个可以很好地解释我们如何做到这一点的资源

我想知道，我们如何将 setinterval 替换为 requestanimationframe 并将 settimeout 替换为 requestanimationframe

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。

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

谢谢

【问题讨论】：

标签： javascript jquery html

【解决方案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

【讨论】：