how to replace setInterval by requestAnimationFrame - setinterval

Question

Here is my situation, I need to speed up the function running time, so setInterval is not a wise choose, right? Since it will cost at least 4ms for each time.
So, may I change setInterval function to requestAnimationFrame, but I don't quite understand how the requestAnimationFrame works.
For example
// some code here
var interval = setInterval(doSomething, 10)
var progress = 0
function doSomething(){
if (progress != 100){
// do some thing here
}else{
clearInterval(interval)
}
}
and how can I apply requestAnimationFrame?

Answer 1

I think the key to understand requestAnimationFrame lies in paul Irish's explanation:
Any rAFs queued in a rAF will be executed in the next frame​
from requestAnimationFrame Scheduling For Nerds
var rafReference;
var progress = 0;
function doSomething(){
// only run 100 times
if (progress < 100){
/* do what you wanna do here */
progress++;
//recursively calls it self as requestAnimationFrame's callback
rafReference = requestAnimationFrame(doSomething) // passed as reference
}else{
cancelAnimationFrame(rafReference)
}
}
//starting the recursion
requestAnimationFrame(doSomething)

Answer 2

Looks better in a fiddle-->just the code,no animation
Every thing is commented inside the code for simplification.No need of using setInterval.
Just use cancelAnimationFrame when we are suppose to clear interval.
// This makes sure that there is a method to request a callback to update the graphics for next frame
var requestAnimationFrame =
window.requestAnimationFrame || // According to the standard
window.mozRequestAnimationFrame || // For mozilla
window.webkitRequestAnimationFrame || // For webkit
window.msRequestAnimationFrame || // For ie
function (f) { window.setTimeout(function () { f(Date.now()); }, 1000/60); }; // If everthing else fails
var cancelAnimationFrame =
window.cancelAnimationFrame ||
window.mozCancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.msCancelAnimationFrame;
// your code here
var progress = 0;
function doSomething() {
if (progress != 100) {
// do something here
var myAnimation = requestAnimationFrame(doSomething);
} else {
// don't use clearInterval(interval) instead when you know that animation is completed use cancelAnimationFrame()
cancelAnimationFrame(myAnimation);
}
}
Some Links worth a read-->
CreativeJs---the best explanation any one could give,Every begineer must read
CancelAnimationFrame
link 3-->in context of your question
I found this fiddle on google,quite the same that you want.
Other things that you should know:
RAF is still in the development stage.
Why doesn't jQuery use requestAnimationFrame?