javascript - jsperf 测试 setInterval() 与 requestAnimationFrame()

Question

有人可以解释为什么turnEvenOld(250, 250)（0.089ms）的运行速度比turnEvent(250, 250)（0.447ms）快得多吗？

我认为使用requestAnimationFrame()比运行更快更便宜setInterval()？

设置间隔（）：

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

请求动画帧（）：

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 帧不一定比 setInterval“快”。它实际上做了一些不同的事情。

setInterval 将等待给定的毫秒数，而 requestAnimationFrame 将等待页面准备好重新绘制。根据 setInterval 调用中的时间，setInterval 等待的时间可能比下一次重绘前的时间更短或更长。

最好将 requestAnimationFrame 用于动画，这样您就可以确定在下一次重绘之前更改视觉元素，而不是可能与页面重绘不同步。