requestAnimationFrame的最新polyfill [英] Up to date polyfill for requestAnimationFrame

问题描述

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

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

解决方案

我刚看过这篇文章并且很好奇亲自试试吧。我已经尝试在不支持高分辨率计时器的浏览器中为rAF回调添加包装器。它使用Paul Irish的原始polyfill以及以下添加的行：

  var hasPerformance = !!（window.performance&& window .performance.now）; 
 
 //为没有性能的浏览器添加新的包装器
 if（！hasPerformance）{
 //存储对现有rAF的引用和初始startTime 
 var rAF = window.requestAnimationFrame，
 startTime = + new Date; 
 
 //覆盖窗口rAF以包含包装回调
 window.requestAnimationFrame = function（callback，element）{
 //包裹给定的回调以传递性能时间戳
 var wrapped = function（timestamp）{
 //获取性能风格的时间戳
 var performanceTimestamp =（timestamp< 1e12）
？ timestamp 
：timestamp  -  startTime; 
 
返回回调（performanceTimestamp）; 
}; 
 
 //使用包装回调调用原始rAF 
 rAF（wrapped，element）; 
} 
} 
  

这里有一个全部组合在一起并更新的要点使用新代码的示例：

https：// gist。 github.com/4078614

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

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

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

http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision tells me that recently (Chrome 20) requestAnimationFrame has gained a new sub-millisecond precision timer, and that I have to update my code to support it.

Looking around at the various polyfills around, they all seem to pre-date this update. Are they somehow functional (I don't think so), or is there simply not an up-to-date one available? Should I just do the timing myself (seems a bit wasteful).

解决方案

I had just read that article too and was curious to try this myself. I've taken a stab at adding a wrapper to the rAF callback in browsers that don't support high-resolution timers. It uses Paul Irish's original polyfill with the following added lines:

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);
    }        
}

Here's a gist of it all combined together and an updated example using the new code:

https://gist.github.com/4078614

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

This approach aims at normalizing the parameter that is passed into the callback function to the high-resolution timer format. You could use a similar approach, just opposite, to convert the high-resolution timer to the old format if you have existing code expecting that, but I see that as a regression.

I'm going to try it out in one of my projects that I'm working on right now and will update the gist if I find any issues / improvements.

这篇关于requestAnimationFrame的最新polyfill的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！