jQueryでリサイズイベントの処理を1回だけ実行する方法

jQueryでリサイズイベントを実行するにはresizeイベントを使いますが、これだとウィンドウ幅を少しでも変えるとその度にイベントが発火してしまいます。

そのため「ウィンドウ幅をpc表示からスマホ表示に切り替えた時の1回だけ発火して、それ以外は処理しない」というのができなかったりします。

というわけで今回はウィンドウ幅をsp→pcやその逆に切り替えたタイミングだけ処理するといったやり方を解説します。

リサイズ時に1回だけイベントを発火させる方法
まとめ

リサイズ時に1回だけイベントを発火させる方法

早速結論ですが、以下のコードをコピペでokです。

$(function () {
  var flag = '';

  $(window).on('load resize', function () {
    var w = $(window).innerWidth();

    // sp幅
    if (w <= 767 && flag != 'sp') {
      flag = 'sp';
      // sp時の処理をここに書く
      console.log('spの処理');

      // pc幅
    } else if (w > 768 && flag != 'pc') {
      flag = 'pc';
      // pc時の処理をここに書く
      console.log('pcの処理');
    }
  });
});

sp時の処理とpc時の処理はコメントの箇所に書けばokです。

簡単にコードの解説をします。

最初にspとpcを切り替えるための変数flagを用意します。

if文にflag != 'sp'やflag != 'pc'と書いてありますが、初期状態ではflag = ''なのでこの部分に関してはロード時はどちらもtrueになります。

あとはウィンドウ幅が767以下かそれ以上かを判定して分岐処理をすればokです。処理の中ではそれぞれフラグを書き換えておきましょう。

仮にsp幅で画面をロードした場合、sp幅の処理を通るのでflag = 'sp'が入ります。ここでウィンドウ幅をpc幅に切り替えると、今まで満たしていたspの条件であるw <= 767を満たさなくなり、かつpc幅の条件であるw > 768 && flag != 'pc'を満たすようになります。

したがってウィンドウ幅を切り替えた時に1回だけ処理できるわけです。pc→spでも同じです。