javascript - 最新的 requestAnimationFrame polyfill

Question

http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision告诉我最近(Chrome 20)requestAnimationFrame 获得了一个新的亚毫秒精度计时器，我必须更新我的代码以支持它。

环顾周围的各种 polyfill，它们似乎都早于此更新。它们是否以某种方式起作用(我不这么认为)，或者根本没有可用的最新版本？我应该自己做计时吗(看起来有点浪费)。

Answer 1

我也刚读过那篇文章，很想亲自尝试一下。我试过在不支持高分辨率计时器的浏览器中向 rAF 回调添加包装器。它使用 Paul Irish 的原始 polyfill 并添加了以下行:

var hasPerformance = !!(window.performance && window.performance.now);

// Add new wrapper for browsers that don't have performance
if (!hasPerformance) {
    // Store reference to existing rAF and initial startTime
    var rAF = window.requestAnimationFrame,
        startTime = +new Date;

    // Override window rAF to include wrapped callback
    window.requestAnimationFrame = function (callback, element) {
        // Wrap the given callback to pass in performance timestamp
        var wrapped = function (timestamp) {
            // Get performance-style timestamp
            var performanceTimestamp = (timestamp < 1e12) 
                ? timestamp 
                : timestamp - startTime;

            return callback(performanceTimestamp);
        };

        // Call original rAF with wrapped callback
        rAF(wrapped, element);
    }        
}

以下是所有内容的要点以及使用新代码的更新示例:

https://gist.github.com/4078614

http://jsfiddle.net/timhall/XQpzU/4351/

此方法旨在将传递到回调函数的参数规范化为高分辨率计时器格式。您可以使用类似的方法(恰恰相反)将高分辨率计时器转换为旧格式(如果您的现有代码需要这样做)，但我认为这是一种回归。

我将在我目前正在进行的一个项目中尝试它，如果我发现任何问题/改进，我将更新要点。