ウィンドウのリサイズ完了を検知する方法

jQuery と Vanilla JS それぞれで、リサイズが「終わった瞬間」だけ処理を実行する debounce パターンを解説します。

jQuery の.resize() イベントを使う場合

.resize() イベントはリサイズ中に何十回も連続して発火します。重い処理（レイアウト再計算・Ajax など）をそのまま登録すると、スクロールのカクつきやパフォーマンス低下の原因になります。

解決策は debounce（遅延実行）パターン。リサイズイベントが来るたびにタイマーをリセットし、一定時間（例: 200ms）止んだら初めて処理を実行します。

var finishResize = function() { var timer = false; var $window = $(window); var windowW = $window.width(); var windowH = $window.height(); $window.resize(function() { // タイマーが動いていたらリセット if (timer !== false) { clearTimeout(timer); } // リサイズが 200ms 止んだら実行 timer = setTimeout(function() { windowW = $window.width(); windowH = $window.height(); console.log('リサイズ完了:', windowW, 'x', windowH); // ↑ ここにリサイズ完了後の処理を記述 }, 200); });};finishResize();
JavaScript
  • リサイズイベントが発火するたびに clearTimeout で前のタイマーをキャンセルします。
  • setTimeout の第2引数（ここでは 200 ms）が「止んだ」と判断する待機時間です。用途に合わせて調整してください。
  • windowW / windowH をクロージャ内で保持しているので、他の処理からも参照できます。

jQuery なしで同じことをする

jQuery が不要な場合は addEventListener と window.innerWidth / innerHeight で全く同じ挙動を実現できます。モダンブラウザは全て対応済みです。

(function() { let timer = null; let windowW = window.innerWidth; let windowH = window.innerHeight; window.addEventListener('resize', () => { // タイマーが動いていたらリセット if (timer !== null) { clearTimeout(timer); } // リサイズが 200ms 止んだら実行 timer = setTimeout(() => { windowW = window.innerWidth; windowH = window.innerHeight; console.log('リサイズ完了:', windowW, 'x', windowH); // ↑ ここにリサイズ完了後の処理を記述 }, 200); });})();
JavaScript
  • 即時関数 (function(){...})() でスコープを閉じているので、グローバル汚染がありません。
  • window.innerWidth / innerHeight は jQuery の .width() / .height() に相当する標準プロパティです。
  • addEventListener はコールバックを複数登録できるため、既存の resize リスナーを壊しません。

jQuery vs Vanilla JS 比較

比較項目jQueryVanilla JS
依存ライブラリjQuery 必須不要
ウィンドウサイズ取得$(window).width()window.innerWidth
イベント登録.resize(fn)addEventListener('resize', fn)
複数リスナー登録△ 上書きの可能性あり◎ 追加登録が安全
ブラウザ対応IE8+ 対応可モダンブラウザ全般

read next