卡在SetInterval，SetTimeOut和Requestanimationframe中 [英] Stuck with SetInterval ,SetTimeOut and Requestanimationframe

问题描述

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

I'm kind of stuck with javascript timers. I have been reading the usage of setInterval ,setTimeOut are bad they cause page reflows and repaints,instead use request animation frame

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

I'm stuck and could not find one resource with a good explanation of how we can do that

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

I want to know ,how can we replace setinterval with requestanimationframe and settimeout with requestanimationframe

var x = 0;

function SayHi() {

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

var intervalid = setInterval(SayHi, 10);

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

How can we replace the above code with requestanimationframe and how can we clear it

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

setTimeout(greetings,10);

如何用requestanimationframe替换上面代码中的setimeout.

How can we replace setimeout in the above code with requestanimationframe.

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

If someone can explain the difference it would be of great help

谢谢

推荐答案

• setTimeout()在一段时间后执行某事.
• setInterval()在每个时间段后重复执行某事.
• requestAnimationFrame()在浏览器就绪" (要重新绘制)时执行某事一次.
• setTimeout() does something once after a period of time.
• setInterval() repeatedly does something after each period of time.
• requestAnimationFrame() does something once when the browser is "ready" (to repaint).

它们有什么相同?

您可以看到他们都想为您做某事.

You can see they all want to do something for you.

它们有何不同?

基本区别是完成某事的时间和频率. setInterval()就像 setTimeout()反复调用一样.另一方面， requestAnimationFrame()类似于 setTimeout()，但是在系统准备就绪时而不是在(伪)固定时间之后调用.

The basic differences are when and how often your something gets done. setInterval() is like setTimeout() called repeatedly. On the other hand, requestAnimationFrame() is like setTimeout() but called when the system is ready rather than after a (pseudo) fixed time.

requestAnimationFrame()如何替换 setTimeout()?

How can requestAnimationFrame() replace setTimeout()?

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

requestAnimationFrame()如何替换 setInterval()?

How can requestAnimationFrame() replace setInterval()?

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

这些是基于您的示例代码的超级简单示例，但我希望它能使您有所了解.

These are super simple examples based on your example code but I hope it gives you a sense of things.

您还可以签出: Mozilla文档在 requestAnimationFrame()

这篇关于卡在SetInterval，SetTimeOut和Requestanimationframe中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！