Question

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

我认为使用requestAnimationFrame()比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框架不一定＆＃34;更快＆＃34;比setInterval。它实际上做了不同的事情。

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

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

jsperf测试setInterval（）vs requestAnimationFrame（）

1 个答案: