次の描画前に関数を実行する

次の描画前に関数を実行するには、window.requestAnimationFrameメソッドを使用します。
window.requestAnimationFrameメソッドは次の特徴があります。

  • 次の描画が行われる前に関数を呼び出す
  • ブラウザの描画更新単位で処理される
  • window.setTimeoutメソッドと同じ1度の実行
  • ブラウザのタブが非アクティブの場合は、非アクティブになっているタブの処理はFPSを下げる(メモリの消費を抑える)

構文

第一引数 callback 呼び出すコールバック関数
戻り値 requestId 識別ID値

なお、window.requestAnimationFrameメソッドはプレフィックスが必要であったりメソッド自体が未対応なブラウザがあるため、ポリフィルを用意するとよいかもしれません。

JavaScript逆引きリファレンス一覧へ戻る