Question

我在看following code from Paul Irish on the requestAnimationFrame shim layer。我想用另一种语言生成这个js，所以我试着把我的脑袋包围着正在发生的事情。（你可以see it being used in an animation here）。

window.requestAnimFrame = (function(){                //1
  return  window.requestAnimationFrame       ||       //2
          window.webkitRequestAnimationFrame ||       //3
          window.mozRequestAnimationFrame    ||       //4
          function( callback ){                       //5
            window.setTimeout(callback, 1000 / 60);   //6
          };                                          //7
})();                                                 //8
                                                      //9
(function animloop(){                                 //10
  requestAnimFrame(animloop);                         //11
  render();                                           //12
})();                                                 //13

我的问题是 - 第2-4行发生了什么？我们似乎正在获取函数句柄，在OR运算中将它们连接起来 - 然后分配{{1}的结果对第1行中的匿名函数的操作 - 然后将其分配给var OR。

修改感谢所有有用的答案 - 我只是想确保我有正确的答案 - 以下是对正在发生的事情的准确表示？（Here is the original）（Here is the version with the more explicit code 。）

window.requestAnimFrame

Answer 1

JavaScript LOGICAL OR（这些不是二进制OR）将使用“truthy”值 - 例如

window.foo = window.foo || function() {};

在这种情况下，因为window.foo不存在，我们将返回第二个opearnd，如果它确实 - 那么OR表达式将计算到第一个操作数。 null或未定义的值是“falsey” - 尽管还有其他虚假值 - 谷歌可以找出它们是什么。

你可以这样读：

将属性requestAnimFrame分配给调用自身的函数的输出。这是一个奇怪的概念，但由于JavaScript的范围规则而通常使用它，它可以防止该函数内的任何变量泄漏到全局范围。这里要注意的重要事项是在第7行，最后的（）调用在第1行开始的函数表达式。

该函数返回window.requestAnimationFrame或window.webkitRequestAnimationFrame OR window.mozRequestAnimationFrame或者最后如果不存在（因此是假的），则返回实现请求动画帧作为超时的函数 - 这是垫片。

最后，您获得指向函数的requestAnimFrame，它是已存在的具有标准名称的内置函数或供应商前缀名称或shim函数。

HTH。

Answer 2

第二行正在请求普通浏览器的新框架第3行适用于Chrome，Safari等浏览器第4行是Mozilla Firefox 因此它适用于每个浏览器。

并解释为什么requestAnimationFrame()优于setInterval()或setTimeout()

Answer 3

此代码有效地检查是否存在requestAnimationFrame的现有浏览器实现，如果它找不到该名称，则通过检查各自的属性名称来检查各种浏览器特定的实现。如果全部失败，最终会提供polyfill实施。

要了解其工作原理，请考虑OR运算符的逻辑：

如果“truthy”返回左手表达式，否则返回右手表达式。

因此，我们有效地遍历链，直到找到定义的表达式（而不是“假”）。请注意，功能是“真实的”。

例如，在浏览器控制台中尝试此操作：

false || 0 || 1 || "Yes"; // returns 1, the first truthy value
true || 1 || false || 0; // returns true, the first truthy value 
false || 0 || "Yes";  // returns "Yes", the first truthy value
false || false || 0; // returns 0, the last value since nothing was truthy
false || 0 || function () {} || false || 1; // returns function () {}

Answer 4

它只返回第一个不为空的函数，因此基本上为用户正在使用的浏览器返回正确的函数。这不是二进制OR，它只是一个条件OR运算符。

解释requestAnimationFrame垫片层

4 个答案: