Stuck with SetInterval ,SetTimeOut and Requestanimationframe
<p>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</p>

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

<p>I want to know ,how can we replace setinterval with requestanimationframe and settimeout with requestanimationframe</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var x = 0;

function SayHi() {

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

var intervalid = setInterval(SayHi, 10);</code></pre>
</div>
</div>
</p>

<p>How can we replace the above code with requestanimationframe and how can we clear it</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function greetings(){
console.log("greetings to u");  
}

setTimeout(greetings,10);</code></pre>
</div>
</div>
</p>

<p>How can we replace setimeout in the above code with requestanimationframe.</p>

<p>If someone can explain the difference it would be of great help</p>

<p>Thanks</p>