Question

当屏幕重绘有多个requestAnimationFrame回调时会发生什么？

有两个requestAnimationFrame块，即

(function a() {
     requestAnimationFrame(a);
}())

(function b() {
     requestAnimationFrame(b);
}())

执行顺序是：

1 ：

 -> a
 -> b
 -> screen redrawn     
 -> a
 -> b
 -> screen redrawn
 ...

2 ：

 -> a
 -> screen redrawn   
 -> b
 -> screen redrawn     
 -> a
 -> screen redrawn
 ...

Answer 1

这是一个有趣的问题。根据我的阅读，在进入下一帧之前，应为每个已注册的回调触发MozBeforePaint事件。为了测试，我稍微修改了您的代码（ FIDDLE ）：

<强> HTML

<button id="start">Start</button>
<button id="stop">Stop</button>

<强> CSS

var aId, bId;

function a(ts) {
    console.log('a', ts);
    aId = requestAnimationFrame(a);
}

function b(ts) {
    console.log('b', ts);
    bId = requestAnimationFrame(b);
}

var startButton = document.getElementById('start');

var stopButton = document.getElementById('stop');

function stop() {
    window.cancelAnimationFrame(aId);
    window.cancelAnimationFrame(bId);
}

function start() {
    a();
    b();
}

startButton.addEventListener('click', start);
stopButton.addEventListener('click', stop);

点击start后的输出似乎确认了预期。第一次调用a()和b()会记录未定义的时间戳，因为它们直接启动动画而不是响应回调。每次a()的后续调用都会记录一个DOMHighResTimeStamp，该b()与调用a undefined b undefined a 123182.04999999944 b 123182.04999999944 a 123198.73199999893 b 123198.73199999893 a 123215.22000000004 b 123215.22000000004 a 123231.9179999995 b 123231.9179999995 a 123248.59099999958 b 123248.59099999958 a 123265.21899999898 b 123265.21899999898所记录的{{1}}相匹配，强烈表明它是同一事件触发两个回调。

<强>输出

{{1}}

注意事项：

我没有具体的第一手实施知识;只是我对文档和此测试的解释
此测试在Mac OS X Chrome 35中执行;其他浏览器可能会产生不同的结果

每次重绘或多次调用一个requestAnimationFrame？

1 个答案: