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

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

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

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

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

 

スポンサーリンク

リサイズ時に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でも同じです。

 

まとめ

pcからspにウィンドウ幅を切り替えた時の1回だけ処理したいみたいな場面はよくありますが、普通にresizeイベントを使うだけだとウィンドウ幅を

普通にresizeイベントを使うとウィンドウの幅を少し変えただけでイベントが発生してしまいますが、今回紹介した方法を使うと1回だけ処理できるようになります。

結構使い道があると思うので試してみてください。

 

参考記事

>>リサイズやスクロールのイベント処理を1回だけ実行する方法

ZennでCSS設計の
本を書きました!

「CSS設計をちょっと勉強したけど
結局よくわからなかった…」
そんな人に読んでほしい一冊です!

読んでみる
スポンサーリンク
JavaScript
スポンサーリンク
でざなり