requestAnimationFrameとsetIntervalの使い分け

こんにちは、ちゃるです😀
Javascriptで同じ処理を繰り返す関数にsetIntervalがありますが、requestAnimationFrameというものもあり、違いがよくわからなかったので調べてみました！

requestAnimationFrameとsetIntervalの違いについて

requestAnimationFrameとsetIntervalは、どちらもJavaScriptで使用される時間管理のためのメソッドです。どちらも、指定された時間ごとに何らかの処理を実行することができます。

しかし、これら2つのメソッドには重要な違いがあります。setIntervalは指定された時間ごとに定期的に処理を実行します。一方、requestAnimationFrameは、画面の更新が必要なタイミングで処理を実行するようにブラウザーに指示するためのものです。

この違いが、setIntervalは定期的な更新を行いますが、requestAnimationFrameは、画面の更新が必要なタイミングでの更新を行うため、requestAnimationFrameの方が効率的であるといえます。特に、動きのあるアニメーションなどを作成する際には、requestAnimationFrameの方が有効です。

また、setIntervalは定期的な更新を行いますが、それが画面の更新と同期しているわけではないため、画面の更新が遅れたり、滞ったりする可能性があります。一方、requestAnimationFrameは、画面の更新と同期して処理を実行するため、滞りや遅れが起きにくいです。

requestAnimationFrameの使い方

JavaScriptでrequestAnimationFrameを使用する場合、次のようなコードになります。

Copy codefunction animate() {
  // アニメーションの処理を行う

  // 次のフレームを要求する
  requestAnimationFrame(animate);
}

// 最初のフレームを要求する
requestAnimationFrame(animate);

上記のコードでは、requestAnimationFrameを使用して、画面の更新のタイミングでanimateという名前の関数を実行するように指示しています。animate関数内では、アニメーションの処理を行います。また、animate関数の最後では、次のフレームを要求するようにrequestAnimationFrameを呼び出しています。

このように、requestAnimationFrameを使用することで、画面の更新のタイミングで処理を実行することができます。

Javascriptを使って動きのあるホームページを作れたらいいなって思いますのでこれからも勉強します！

サポートをいただいたらスクールに通ったり参考書を買ったりしたいと思います。支援をお待ちしています😀