javascript - window.requestAnimFrame 说明

Question

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

1. window.requestAnimFrame 和 window.requestAnimationFrame 有区别吗？

2. window.requestAnimFrame/AnimationFrame 是否类似于 document.onload = 或 img.onload = 函数

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

Answer 1

Is there a difference between window.requestAnimFrame and window.requestAnimationFrame ?

是的，requestAnimFrame 是添加到窗口对象的自定义非官方属性，而 requestAnimationFrame 是 W3C 在其 WindowAnimation 中提供的 HTML5 canvas 官方标准的一部分节"Timing control for script-based animation" .

但是，他们做同样的事情。保罗爱尔兰要么有一个懒惰的时刻(在这种情况下他应该称之为 rAF IMO :-) ) - 或者 - 他不想遇到方法在内部受到保护的风险浏览器在他写它的时候(Opera 的 Erik Möller 写了他的 own version of this polyfill，它使用了全名)。

A polyfill , 或 shim, or shiv , 或 monkey-patch, or duck-punching, or shaking the bag (!谁想出了这些名字？？)无论如何，在这种情况下，只是尝试统一各种浏览器中的功能。

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

因此，不是每次需要调用该方法时都对此进行测试，而是一种 polyfill 将这些方法合并，或者选择可用的方法，将其合并到一个通用的命名调用中，并确保 future 的非前缀实现也能正常工作。

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

(这方面的好消息:Chrome 和 Firefox 现在已经发布了这种不带前缀的方法，其他浏览器可能会效仿)。

Is window.requestAnimFrame/AnimationFrame similar to the document.onload = or 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 运算的结果将设置 window.mozRequestAnimationFrame(如果 window.requestAnimationFrame 可用)，其他前缀选项依此类推。

如果不存在，则最后的手段是设置 setTimeout 回退。这在这种情况下有效，因为它们与签名兼容(将函数作为参数调用)。

结果是您可以调用 window.requestAnimationFrame(或者在 Pauls polyfill window.requestAnimFrame 的情况下)并且它可以在任何浏览器中工作，无论它们是否支持方法是否有前缀，或根本没有。

(我现在肯定怀疑 Paul，因为我厌倦了一直输入 requestAnimationFrame..:-| )