requestAnimationFrameがIE10で予期しないパラメータを渡しています

Question

したがって、機能検出を使用してブラウザが​​をサポートしているかどうかを確認し、setTimeoutベースの解決策に戻ってください（Paul Irish's famous postの行に何かがあります）。

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では、timeパラメータが渡されても、現在時刻と関係がないように見え、timePassedの計算が不正です。

何が起こっているのですか？

Answer 1

すべてが（私の知る限り）（執筆時点で）で仕様によって​​行くを実装する他のブラウザ現在Working Draft：

時間は[再描画時間]とする表現しました1970-01-01T00：00：00Zからのミリ秒数です。

これは正確にあなたのNOW()のような時間を表しています。

IE10しかしgoes現在Editor's Draftでのスペックによって：

時間は、このコンテキスト内でnow method of the Performance interfaceを呼び出した結果とします。基本的にブラウザが（それはまたperformance.nowは小数ミリ秒を返しますので、測定は、より正確であることを意味する）このページを読み込まからのミリ秒の数を意味

。

したがって、IE10で初めてtimePassedを計算すると、負の43歳のようなものが得られます。

幸いにも、​​コールバックに渡される値はどちらの場合も同じ単位であるため、異なる参照点があります。これは簡単に調整できます。

1. あなただけの唯一のpreviousTimeを設定することを使用して、非常に最初のアニメーションのステップを捨てることができますが、他に何もしていない：

   は三つの可能性があります。

2. 渡されたパラメータを無視して、毎回NOW()（またはperformance.now）を使用すると、常に同じ参照ポイントが使用される可能性があります。

3. それとも、これにアニメーションの開始を変更することができます：

   // start the animation 
   reqAnimationFrame(function (t) { 
       previousTime = t - (NOW() - previousTime); 
       animStep(t); 
   ); 
   

   これは（最初の1を含む）の計算を行いますtimePassedのは、以下のブラウザをスペックどんなにを修正します。最初の呼び出しだけが変更されるため、長期的には追加のオーバーヘッドもありません。