requestAnimationFrameについて

お世話になります。

JS初学者です。
参考書の問に以下のものがありちんぷんかんぷんなため、どなたか分かる方ご教授お願いできませんでしょうか。

以下、参考書の問

html
1<body>
2  <canvas id="canvas" height="400px" width="1000px"></canvas>
3
4  <script>
5    window.addEventListener("load",function(){
6      let canvas = document.getElementById('canvas');
7      let ctx = canvas.getContext('2d');
8      let previousTime = 0;
9      let x = 0;
10   
11
12    function drawGraph(timestamp){
13      let time = Math.ceil(timestamp - previousTime);
14      previousTime = timeStamp;　　//※
15
16      if(time < 30){
17        ctx.fillStyle = 'blue';        
18      }else{
19        ctx.fillStyle = 'red';
20      }
21
22      ctx.fillRect(x,400,5,-time);
23      x += 10;
24
25      if(x > 1000){
26        x = 0;
27        ctx.clearRect(0,0,1000,400);
28      }
29      requestAnimationFrame(drawGraph);
30    }
31    requestAnimationFrame(drawGraph);
32  });
33
34  </script>
35</body>

この後に選択肢があり、解答は
drawGraph関数内で再度requestAnimationFrame()メソッドを呼び出しているため、エラーが発生する。
となっています。

また解説に
次の再描画時に別のアニメーションを実行させるには、コールバック関数内でrequestAnimationFrame()メソッドを呼び出す必要があります。
とあります。

質問は、解説のように問いのコードを修正するにはどのように直せばいいでしょうか
また、
コードの１１行目、
previousTime = timeStamp;
はどういうふうに解釈すればいいでしょうか
（こういうvarやlet、constへの代入ではない＝の使われ方を見るのは初めてでどう考えればいいのか思いました。）

分かる方ご教授よろしくお願いします。

（出典「HTML5プロフェッショナル認定試験レベル２」（SHOEISYA）P290）

行動規範の内容に同意します

回答1件

ベストアンサー

drawGraph関数内で再度requestAnimationFrame()メソッドを呼び出しているため、エラーが発生する。

上記のコードではエラーが発生しますが、原因は違います。

こういうvarやlet、constへの代入ではない＝の使われ方を見るのは初めてで

上にあるlet previousTime = 0;に代入しているだけです。

エラーを修正したものをjsFiddleに作成してみました。

投稿2022/06/21 22:45

maisumakun

総合スコア145184

susumu-99

2022/07/02 13:22

お礼が遅くなり大変申し訳ありません。書籍の問題の理解不足と、入力ミス（※）が原因でした。 ※11行目、timestampをtimeStampと入力していました。また ”previousTime = 0”についても解説していただきすっきり理解できました。理解できず質問したことが恥ずかしかったです。いつも適切な回答ありがとうございます。大変助かりました。

行動規範の内容に同意します