Question

我有来自Core HTML 5 canvas的以下代码：

    window.requestNextAnimationFrame = (function() {
    var originalWebkitRequestAnimationFrame = undefined,
    wrapper = undefined,
    callback = undefined,
    geckoVersion = 0,
    userAgent = navigator.userAgent,
    index = 0,
    self = this;

    // Workaround for Chrome 10 bug where Chrome
    // does not pass the time to the animation function

    if (window.webkitRequestAnimationFrame) {
        wrapper = function(time) {

            if (time === undefined) {
                time += new Date();
            }

            self.callback(time);
        };

        // Make the switch

        originalWebkitRequestAnimationFrame = window.webkitRequestAnimationFrame;

        window.webkitRequestAnimationFrame = function(wrapper, element) {
            self.callback = callback;

            // Browser calls the wrapper and wrapper calls the callback

            originalWebkitRequestAnimationFrame(wrapper, element);
        };
    }

    // Workaround for Gecko 2.0, which has a bug in
    // mozRequestAnimationFrame() that restricts animations
    // to 30-40 fps.

    if (window.mozRequestAnimationFrame) {
        // Check the Gecko version. Gecko is used by browsers
        // other than Firefox. Gecko 2.0 corresponds to
        // Firefox 4.0.

        index = userAgent.indexOf('rv:');

        if (userAgent.indexOf('Gecko') != -1) {
            geckoVersion = userAgent.substr(index + 3, 3);

            if (geckoVersion === '2.0') {
                // Forces the return statement to fall through
                // to the setTimeout() function.

                window.mozRequestAnimationFrame = undefined;
            }
        }
    }

    return window.requestAnimationFrame ||
           window.webkitRequestAnimationFrame ||
           window.mozRequestAnimationFrame ||
           window.oRequestAnimationFrame ||
           window.msRequestAnimationFrame ||

         function(callback, element) {
             var start,
                finish;

             window.setTimeout(function() {
                 start = +new Date();
                 callback(start);
                 finish = +new Date();

                 self.timeout = 1000 / 60 - (finish - start);

             }, self.timeout);
         };
})();

当我查看Chrome控制台时，它似乎有window.webkitRequestAnimationFrame以及window.requestAnimationFrame。如果我错了，请纠正我，但window.requestAnimationFrame是较新的，这是我应该使用的那个。

如果这是真的，那么这段代码是不是花时间为window.requestNextAnimationFrame构建东西？如果我的Chrome版本还有window.requestAnimationFrame？

，它不应该跳过该代码

Answer 1

如果定义了window.requestAnimationFrame，开发人员应该理所当然地将其作为规范。其他一切都应该根据具体情况采取。 webkit.webkitRequestAnimationFrame应该被忽略。

此外，我想补充一点，很久以来，很久以前的浏览器都可以使用他们破碎的实现。特别是，如果Firefox 4的速度限制为40 fps，那么真的不会发生任何不好的事情，因为我们可以说没有人再使用Firefox 4了，如果有人能够在大多数情况下使用40 fps。

Chrome 10也是如此（没有人应该甚至不再使用它）：对我来说，解决方法似乎有些过分。如果您真的想修复错误，可能需要检查错误是否首先，例如：

window.webkitRequestAnimationFrame(function(time) {
    if (time === undefined) {
        // ... Fix!
    }
});

请记住：用户代理嗅探错误。

您服务的代码越少越好。无论如何，这是我的意见。您应该根据您的情况（和用户群）调整所有内容。

polyfill requestNextAnimationFrame代码的代码

1 个答案: