Question

(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
    window.cancelAnimationFrame =
      window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}

if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function(callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function() { callback(currTime + timeToCall); },
          timeToCall);
        lastTime = currTime + timeToCall;
        return id;
    };

if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
    };
}());

取自https://gist.github.com/paulirish/1579671。在第一个if语句中，它测试了作为窗口属性存在的requestAnimationFrame。在这个if语句中，它创建了补偿所需的超时，但它是否也创建了一个时间戳来传递给被调用的函数？ element参数有什么作用？我想我需要有人来帮助我理解这里发生的事情。

这是一个用例来显示我所指的时间戳：

var id = null,
start_time = null,
time_passed = null;

function loop( timestamp ){

   if( !start_time ) start_time = timestamp;

   time_passed = timestamp - start_time;

   if( time_passed < 1000 ){
        id = requestAnimationFrame( loop );
   }

}

id = requestAnimationFrame( loop );

Answer 1

第一个循环只是通过检查window.requestAnimationFrame中是否存在供应商前缀变体来测试window.cancelAnimationFrame和window-object是否存在。

已弃用element参数，如http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

中所示

您还会注意到requestAnimFrame的第二个参数：可视化地限制整个动画的元素。对于帆布和 WebGL，这将是实际的元素。对于DOM的东西，你可以将其关闭或定义它以进行稍微优化经验。 它已从规范中删除（和WebKit的实现）

它将当前时间戳传递给回调函数：

var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);

其中currTime + timeToCall是调用函数的时刻。然后，您可以像在示例中一样，在动画函数中将其用作第一个参数：

function loop(time){ //time === current time }

此requestAnimationFrame polyfill是否也生成时间戳？

1 个答案: