解释requestAnimationFrame填充层

Question

我在看 以下来自paul Irish在requestAnimationFrame填充层上的代码.我想从另一种语言生成这个js，所以我试图将我的头完全围绕到底发生了什么。（你可以 看到它在这里的动画中使用).

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操作中将它们连接在一起-然后分配 OR 对第1行中的匿名函数的操作-然后将其分配给var window.requestAnimFrame.

编辑: 感谢所有有用的答案-我只是想确保我有这个正确的 - 下面是一个准确的表示正在发生的事情吗? (这是原版) (这是具有更明确代码的版本.)

var myfunc = function() {
    if (typeof(window.requestAnimationFrame) != "undefined") {
        return window.requestAnimationFrame;
    } else if (typeof(window.webkitRequestAnimationFrame) != "undefined") {
        return window.webkitRequestAnimationFrame;
    } else if (typeof(window.mozRequestAnimationFrame) != "undefined") {
        return window.mozRequestAnimationFrame;
    } else {
        return function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
    }
};
window.requestAnimFrame = myfunc;

Answer 1

javascript逻辑或（这些不是二进制或者）将使用“真实”值 - 考虑例如。

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

.

在这种情况下，因为window.foo不存在，我们会返回第二个opearnd，如果它执行了 - 然后或表达式将评估为第一个操作数。 null或未定义的值是“valsey” - 尽管还有其他vallegy值 - 谷歌找出它们是什么。

您可以如下阅读：

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

该函数返回window.requestanimationframe或window.webkitrequestanimationframe或window.mozrequestanimationFrame或最后一个存在（并且因此是valsey）返回实现请求动画帧作为超时的函数 - 这是垫片。

在最后，您获得了RequestAnimframe指向函数，它已现有的内置功能与标准名称或供应商前缀名称或垫片功能。

hth。

Answer 2

第二行是请求一个新的框架为一般浏览器。
第三行是浏览器，如Chrome，Safari。
第四行是Mozilla火狐浏览器。
所以它是每个浏览器的通用。

还有解释了为什么 requestAnimationFrame() 比...... setInterval() 或 setTimeout()

Answer 3

它只是返回一个没有null的函数，所以基本上返回用户使用的浏览器的正确功能。这不是二进制文件，也不是条件或运营商。

Answer 4

此代码有效地检查是否存在存在的现有浏览器实现，如果它未找到一个名称，它会通过检查它们各自的属性名称来检查各种浏览器特定实现。如果所有失败，则最终提供了一个实现。

要查看此操作，请考虑或运算符的逻辑：

• 返回左手表达式如果它“真的”，否则返回右手表达式。

因此我们有效地遍历链，直到我们找到定义的表达式（不是“valley”）。请注意，函数是“真的”。

例如，在浏览器控制台中尝试一下：

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 () {}

.