requestAnimationFrame()の挙動がよく分かりません。

Question

(HTML)
<div style="position:absolute; height:30px; width:30px;
background-color:red" id="box">
</div>

(JavaScript)
var start = 0;
var divEle = document.getElementById("box");

function step(timestamp) {
  var progress = timestamp - start;
  divEle.style.left = (progress / 10) + "px";


  if(progress < 10000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

変数startはどのようなものなのでしょうか。
「timestamp - start」とありますが、startの値は更新されるのでしょうか。
よろしくお願い致します。

Answer 1

「timestamp - start」とありますが、startの値は更新されるのでしょうか。

されません。おそらく、「正しいstartを設定する」処理が抜けているものと思われます。

なお、stepに渡ってくるtimestampは、ミリ秒単位の時間が入ってきます（MDN）。

Comments

[taka_oct092018]

maisumakun様、回答ありがとうございます。
資格試験問題のコードなのですが、やはり内容がおかしいですね。