Question

我在Javascript / HTML5中有两个关于window.requestAnimFrame的问题

window.requestAnimFrame和window.requestAnimationFrame之间有区别吗？
window.requestAnimFrame / AnimationFrame是否类似于document.onload =或img.onload = functions

对不起，我可能有点不清楚，但如果你明白，你能解释一下吗？谢谢：D

Answer 1

window.requestAnimFrame和window.requestAnimationFrame之间有区别吗？

是的，requestAnimFrame是添加到窗口对象的自定义非官方属性，而requestAnimationFrame是W3C在{{3}的WindowAnimation部分中提供的HTML5画布的官方标准的一部分}。

然而，他们做同样的事情。保罗爱尔兰要么有一个懒惰的时刻（在这种情况下他应该称之为rAF IMO :-)） - 或 - 他不想冒险在浏览器内部保护方法的风险他写的时候（Opera的ErikMöller写了他的"Timing control for script-based animation"使用了全名。）

own version of this polyfill或polyfill，或shim, or shiv （！谁提出这些名称？）只是尝试在这种情况下，在各种浏览器中统一功能。< / p>

例如，当requestAnimationFrame以实验状态实现时，该方法在各种浏览器中加上前缀，即。适用于Firefox / Aurora的mozRequestAnimationFrame，适用于Chrome和Safari等WebKit浏览器的webkitRequestAnimationFrame，适用于Opera的oRequestAnimationFrame等等。

因此，每次需要调用方法时，不要对此进行测试，而是将这些方法合并，或者将可用的方法合并到单个公共命名调用中，以及确保将来的非前缀实现也能正常工作。

这意味着您可以使用polyfill所在的名称，而不必担心将来的更改，因为当浏览器中提供官方命名方法时它将起作用。

（在这方面的好消息：Chrome和Firefox现在已经发布了这种方法，其他浏览器也可能会效仿）。

window.requestAnimFrame / AnimationFrame类似于document.onload =或img.onload = functions？

不是真的。这是一种简单的做法：

document.onload = function;
img.onload = function;

而polyfill相当于：

var myVar = var1 || var2 || var3;

（JavaScript中的|| = OR）其中myVar将成为第一个定义的值，前提是只设置了一个（请注意，这是一种非常简单的说法，因为它比这取决于那些变量是什么）。

所以window.requestAnimFrame（或window.requestAnimationFrame）只是“要求”设置第一个可用的已定义方法，其中非前缀优先：

window.requestAnimationFrame = window.requestAnimationFrame;

只会将它自己设置为存在，但如果不存在，我们需要提供替代值：

window.requestAnimationFrame = window.requestAnimationFrame ||
                               Window.mozRequestAnimationFrame ...

因此，如果window.requestAnimationFrame不存在，则会尝试使用moz前缀，依此类推。对于其他前缀选项，此OR'ing的结果将window.mozRequestAnimationFrame设置为window.requestAnimationFrame，等等。

如果不存在则是最后的手段，而是设置setTimeout后备。这适用于这种情况，因为它们是签名兼容的（将函数作为参数调用）。

结果是你可以调用window.requestAnimationFrame（或者在Pauls polyfill window.requestAnimFrame的情况下）它可以在任何浏览器中工作，无论它们是否支持前缀或不支持的方法。

（我现在肯定怀疑保罗，因为我厌倦了一直输入requestAnimationFrame ..： - |）

Answer 2

你应该完全忘记window.requestAnimFrame。只关心window.requestAnimationFrame 并非所有浏览器都在本机实现，而是作为实验性功能：在这种情况下，他们在方法名称前加上一个前缀：FF的mozRequestAnimationFrame，Chrome / Safari的webkitRequestAnimationFrame，等等。 polyfill是一种方法，可以对这些命名进行规范化，以便能够轻松访问rAF，而无需考虑浏览器认为它是否具有实验性。
这可能看起来有点浪费时间，但截至目前，所有rAF版本的行为都不一样：例如，当firefox使用毫秒时间戳时，Chrome的rAF将以亚毫秒（微秒精度）时间戳回调函数。 / LI>
我在my canvas library中使用的polyfill就是这个：
```
// requestAnimationFrame polyfill
(function() {
var  w=window,    foundRequestAnimationFrame  =    w.requestAnimationFrame ||
                               w.webkitRequestAnimationFrame || w.msRequestAnimationFrame ||
                               w.mozRequestAnimationFrame    || w.oRequestAnimationFrame  ||
                                        function(cb) { setTimeout(cb,1000/60); } ;
window.requestAnimationFrame  = foundRequestAnimationFrame ;
}());
```
2）onload和rAF非常不同：正如我在评论中所述，rAF将等待屏幕的下一个垂直同步（VSYNC）执行（绘制）代码。所以基本上，当onload是关于文档准备就绪时，rAF是关于屏幕准备好的。

window.requestAnimFrame澄清

2 个答案: