jsperf测试setInterval（）与requestAnimationFrame（）

Question

Can someone explain why turnEvenOld(250, 250) (0.089ms) runs much much more faster than turnEvent(250, 250) (0.447ms)?

I thought using requestAnimationFrame() was a lot faster and cheaper to run than setInterval() ?

setInterval():

var turnEventOLD = function turnEvent(AnX, AnY) {
    ----VARIABLES----
    temp = setInterval(myAnimation1, 1000/60);
    function myAnimation1() {
        ----DRAWINGCANVAS------
        -----
        ----CONDITIONS--------
        if (one301 && one401) {
            clearInterval(temp);
        }
    }
}

requestAnimationFrame():

var turnEvent = function turnEvent(AnX, AnY) {
   ----VARIABLES-----
    function render() {
        ----DRAWING CANVAS-----
        ------
        ----CONDITIONS---------
        if (one301 && one401) {
            ---stop requestAnimation--
        }
    }
    (function animloop(){
        ----CONDTION-----
        requestAnimationFrame(animloop);
        render();
    })();
}

Answer 1

RequestAnimation frame is not necessarily "faster" than setInterval. It actually does something different.

setInterval will wait a given number of milliseconds while requestAnimationFrame will wait until the page is ready to repaint. Depending on the time in your setInterval call, the time setInterval waits could be shorter or longer than the time until the next repaint.

It is better to use requestAnimationFrame for animations so you're sure you change the visual elements before the next repaint instead of being potentially out of synch with the page repaints.