Javascript 每次重画调用一个requestAnimationFrame还是多次调用？

当存在多个与屏幕重画相关的requestAnimationFrame回调时会发生什么

使用两个requestAnimationFrame块，即

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

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

执行的顺序是：

1：

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

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

2：

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

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

---

这是一个有趣的问题。根据我的阅读，在进入下一帧之前，应该为每个注册的回调触发一个

MozBeforePaint

事件。为了测试，我稍微修改了您的代码（）：

HTML

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

单击

start

后的输出似乎确认了该期望。第一次调用

a（）

和

b（）

记录未定义的时间戳，因为它们直接启动动画，而不是响应回调。随后每次调用

a（）

都会记录一个与调用

b（）

记录的事件相匹配的

DOMHighResTimeStamp

，这强烈表明触发两个回调的是同一事件

输出

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

注意事项：

• 我对实现没有具体的第一手知识；只是我对文档和测试的解释
• 该测试在MacOSXChrome35中执行；其他浏览器可能会产生不同的结果

---

不错！与OSX上的Safari和Firefox结果相同。我想问题是。。。是否保证以这种方式执行？以一个游戏为例：如果前台和后台在单独的请求回调上绘制，那么它们可能不会同时绘制。Yip。确认，谢谢。我经常编辑您的小提琴以锁定浏览器，并可以确认a和b始终使用相同的时间戳调用：