JavaScriptで'resize'イベントの終了を待ってからアクションを実行する方法

タイムアウトを使用する方法:
```
let resizeTimeout;
window.addEventListener('resize', () => {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(() => {
// リサイズイベントの終了後に実行するアクションを記述する
}, 500); // 待ち時間を調整することもできます
});
```
この方法では、リサイズイベントが発生するたびにタイムアウトをクリアし、新しいタイムアウトを設定します。指定した待ち時間（ここでは500ミリ秒）が経過すると、アクションが実行されます。
requestAnimationFrameを使用する方法:
```
let resizeRequestId;
window.addEventListener('resize', () => {
if (resizeRequestId) {
window.cancelAnimationFrame(resizeRequestId);
}
resizeRequestId = window.requestAnimationFrame(() => {
// リサイズイベントの終了後に実行するアクションを記述する
});
});
```
この方法では、requestAnimationFrameを使用してリサイズイベントの終了を待ちます。リサイズイベントが発生するたびに、前のリクエストがあればキャンセルし、新しいリクエストを設定します。アクションは、次のフレームの描画前に実行されます。

イベントのスロットリングを使用する方法:

function throttle(callback, delay) {
let isThrottled = false;

return function() {
if (isThrottled) {
  return;
}

isThrottled = true;
callback.apply(this, arguments);
setTimeout(() => {
  isThrottled = false;
}, delay);
}
}
window.addEventListener('resize', throttle(() => {
// リサイズイベントの終了後に実行するアクションを記述する
}, 500)); // 待ち時間を調整することもできます

この方法では、イベントのスロットリングを使用してリサイズイベントの頻度を制御します。指定した待ち時間（ここでは500ミリ秒）の間、最初のイベント以外は無視されます。アクションは、待ち時間が経過した後に実行されます。

これらの方法を組み合わせることもできますし、他の方法も存在します。選択した方法に基づいて、リサイズイベントの終了を待ってからアクションを実行するコードを記述してください。