javascript – requestAnimationFrame在IE10中传递意外参数

前端之家收集整理的这篇文章主要介绍了javascript – requestAnimationFrame在IE10中传递意外参数前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我一直是一个很好的网民,使用功能检测来查看浏览器是否支持requestAnimationFrame,否则只回退到基于setTimeout的解决方案(约为 Paul Irish’s famous post行). @H_502_2@var NOW = Date.now || function () { return new Date.getTime(); }; var reqAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || /* ... || */ function (callback) { setTimeout(function () { callback(NOW()); },1000 / 60); }; var prevIoUsTime = NOW(); function animStep(time) { var timePassed = time - prevIoUsTime; myCharacter.move(myCharacter.speed * timePassed); prevIoUsTime = time; reqAnimationFrame(animStep); } // start the animation reqAnimationFrame(animStep);

在Internet Explorer 10出现之前,这种方法无处不在.在IE10中,传递的时间参数似乎与当前时间无关,搞砸了timePassed的计算.

这是怎么回事?

解决方法

所有(据我所知)其他实现requestAnimationFrame的浏览器都遵循(在撰写本文时)当前 Working Draft的规范:

Let time be [the redraw time] expressed as the number of milliseconds since 1970-01-01T00:00:00Z.

这就像你的NOW()那样代表时间.

IE10然而goes由当前Editor’s Draft的规格:

Let time be the result of invoking the 07003 within this context.

这实质上意味着自浏览器加载此页面以来的毫秒数(这也意味着测量更精确,因为performance.now返回小数毫秒).

因此,当你在IE10中第一次计算timePassed时,你会得到负面的43年.

幸运的是,因为传递给requestAnimationFrame回调的值在任何一种情况下具有相同的单位,只是一个不同的参考点,你可以很容易地调整到这一点.

有三种可能性:

>你可以扔掉第一个动画步骤,仅使用它来设置prevIoUsTime,但不做其他任何事情.
>您可以忽略传递的参数并每次使用您的NOW()(或performance.now),因此始终具有相同的参考点.
>或者您可以将动画的开头更改为:

@H_502_2@// start the animation reqAnimationFrame(function (t) { prevIoUsTime = t - (NOW() - prevIoUsTime); animStep(t); );

这将使得无论浏览器遵循哪个规范,timePassed的计算(包括第一个)都是正确的.并且因为它只改变了第一次调用,所以从长远来看,你也没有任何额外的开销.

猜你在找的JavaScript相关文章