javascript – requestAnimationFrame的最新polyfill

前端之家收集整理的这篇文章主要介绍了javascript – requestAnimationFrame的最新polyfill前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision告诉我最近(Chrome 20)requestAnimationFrame获得了一个新的亚毫秒精度计时器,我必须更新我的代码支持它.

环顾周围的各种polyfills,他们似乎都在这个更新之前.它们是否具有某种功能(我不这么认为),或者根本没有最新的可用功能?我应该自己做这个时间(看起来有点浪费).

解决方法

我刚读过那篇文章,很想自己尝试一下.我已经尝试在不支持高分辨率计时器的浏览器中为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/

方法旨在将传递回调函数的参数规范化为高分辨率计时器格式.您可以使用类似的方法,恰好相反,如果您有现有的代码期望,将高分辨率计时器转换为旧格式,但我将其视为回归.

我将在我正在进行的一个项目中尝试一下,如果我发现任何问题/改进,我会更新要点.

原文链接:https://www.f2er.com/js/157148.html

猜你在找的JavaScript相关文章