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

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