[jQuery]画面リサイズ時に一度だけ処理を実行させる

リサイズが終わってから処理を走らせたい

jQueryのリサイズイベントは画面サイズの変更を検知し、任意の処理を実行します。

画面サイズに比例してコンテンツのサイズが変化する時、「常に中央に配置しておきたい」「高さを揃えたい」などの要望を叶える際に役立ちます。

ただし欠点もあります。リサイズ時は常に処理を実行しているので何十、何百回と同じ処理が走り、時には不都合となる場合があります。

そこで、リサイズが終わってから1回だけ処理を実行させるような仕組みにしたいと思います。

以下、参考にさせて頂いたサイト様です。
ウィンドウサイズ変更時に一度だけjQueryを実行
 ウィンドウリサイズ完了時に一度だけ関数を実行する

jQuery

var resizeTimer = false;

$(window).on('resize', function () {

  if (resizeTimer !== false) {
    clearTimeout(resizeTimer);
  }

  resizeTimer = setTimeout(function () {
    // 処理
  }, 200);

});

var resizeTimer = false;

$(window).on('resize', function () {

if (resizeTimer !== false) {

clearTimeout(resizeTimer);

}

resizeTimer = setTimeout(function () {

// 処理

}, 200);

});

`clearTimeout`関数

clearTimeout(timeoutID)

setTimeout()を使用して設定された遅延処理を取り消す

引数	説明
timeoutID	`setTimeout()`の返り値として返されるIDのうち、取り消したいIDを指定する。

`setTimeout`関数

setTimeout(func, delay, [param1, param2, …])

指定した遅延時間の後に、関数の呼び出し、またはコードの実行を行う
返り値としてclearTimeout()に渡すことができるタイムアウトのIDを返す

引数	説明
func	`delay`ミリ秒後に実行したい関数を指定する。
delay	遅延させる時間をミリ秒単位の数値で指定する。
paramN	`func`へ渡す引数。