requestAnimationFrame
ブラウザの画面描画のタイミングに合わせてcallbackを実行するため API
主にアニメーションをスムーズに描画 するために使われる
ブラウザは60FPSで画面を更新しており、このタイミングに合わせて実行することでカクツキを減らせる
説明わかりづらすぎ
使用の前後の挙動の差異を確認できるサンプル
この部分を切り替えると実感できる
code:js
// requestAnimationFrame を使用（スムーズ）
animateWithRAF();
// setTimeout を使用（カクつく）
// animateWithSetTimeout();
https://gyazo.com/0cae81855bbb24fbaed657116ae92a6a
左がrequestAnimationFrameを使っているもの
API
code:js
requestAnimationFrame(callback);
callback
次の描画フレームの直前に実行される関数を指定する
一般的には、UIの操作（DOMの更新やCanvasの描画）を行うロジックを記述する
使用例
再帰的に呼び出すことが多く、イメージが湧きやすい
code:ts
requestAnimationFrame(animate); // run
function animate() {
console.log('Rendering frame'); // 何らかの描画処理
requestAnimationFrame(animate); // 次のフレームをリクエスト
}
連続的に描画処理を行うが、良い感じのタイミングで処理してくれる
1回だけ呼ぶケースは少ないがあるにはある、らしい
次の描画タイミングに UI の更新を合わせる、という用途