リサイズイベントの発生を調整するjQuery smartresize

ブラウザのサイズを変更する際、そのリサイズ操作中には同じイベントが発動し続けます。
smartresizeは、リサイズ後に1度イベントを拾いたいときや、発火頻度を調整したいときに使えるjQueryプラグインです。

jQuery smartresize

概要

• ブラウザによりresizeイベント発火頻度が大きく異なった頃に、クロスブラウザ問題を解決するべくsmartresizeは作られた。
  ※Chrome, Safari での2重発火など。
• ウィンドウのリサイズ後に1度だけ発火するイベント（debouncedresize）と発生頻度を抑えるイベント（throttledresize）の2つを提供している。
• debouncedresize は、setTimeout()で実装している。
• debouncedresize は、さらに昔、smartresize という名前で作られていた。

ダウンロード

https://github.com/louisremi/jquery-smartresize

使い方

jQueryライブラリの後に、ダウンロードした jquery.debouncedresize.js or/and jquery.throttledresize.js を読み込みます。

html<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="...path_to.../jquery.debouncedresize.js"></script>
<script type="text/javascript" src="...path_to.../jquery.throttledresize.js"></script>

■ debouncedresize イベント
リサイズ後に1度、処理したいとき

debouncedresize イベント$( window ).on( "debouncedresize" , function(e) {
  // YOUR EVENT HANDLER
});

リサイズした後、デフォルトで150ミリ秒後に発火します。
発生間隔は、オプション threshold で指定できます。

debouncedresize イベント$( window ).on( "debouncedresize" , function(e) {
  $.event.special.debouncedresize.threshold = 250; // 250ミリ秒へ変更
  // YOUR EVENT HANDLER
});

■ throttledresize イベント
リサイズイベント数を抑えて、処理したいとき

throttledresize イベント$( window ).on( "throttledresize" , function(e) {
  // YOUR EVENT HANDLER
});

イベント間のanimation tick数（フレーム数）は、デフォルトが0(tick)で、最大60fpsで発火します。
オプション threshold で指定できます。

1 : 30 fps
2 : 20 fps
3 : 15 fps

throttledresize イベント間の発火数$( window ).on( "throttledresize" , function(e) {
  $.event.special.throttledresize.threshold = 1; // 30fpsへ減らす
  // YOUR EVENT HANDLER
});

■ bindしたイベントをunbindしたいとき

unbind$( window ).off( "debouncedresize" );

■ debouncedresize, throttledresize イベントをトリガーに何か処理をしたいとき

(Synchronous) Trigger$(window).trigger( "debouncedresize" );

//遅延なく同期させたいとき
$(window).trigger( "throttledresize", [true] );

【コピペのみ！】リサイズ後1度だけ用のミニマム版

ライブラリ不要で使えます！

Minimalist Standalone Version// 「リサイズ後1度だけ」のfunction定義
function on_resize(c,t){onresize=function(){clearTimeout(t);t=setTimeout(c,100)};return c};

//使い方もシンプル！
on_resize(function() {
  // handle the resize event here
  ...
});

//ページロード時の初期化が必要な場合は、後ろにカッコをつける！
on_resize(function() {
  ...
})(); // these parenthesis does the trick
https://github.com/louisremi/jquery-smartresize/blob/master/README.md

コピペ用function on_resize(c,t){onresize=function(){clearTimeout(t);t=setTimeout(c,100)};return c};
on_resize(function() {

})();

試してみる

setTimeout()でざっくり書くと…

setTimeout()でイベント発生数を抑える$(window).resize(function(){
	(t!==false)&&clearTimeout(t);
	t=setTimeout(function(){ console.log("@@@ " + new Date()); },200);
});

※タイマー処理で、リサイズ発生後200ミリ秒後に何か（上記 ↑ はconsole出力）する。

これを、debouncedresize を利用すると、

html<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="...path_to.../jquery.debouncedresize.js"></script>

js$( window ).on( “debouncedresize” , function(e) {
  $.event.special.debouncedresize.threshold = 200;
  console.log("Resize event! @ " + +new Date());
});

となります。

最後に、ミニマム版でのサンプルを。実践で頻度増しそう✲ﾟ｡.(✿╹◡╹)ﾉ☆.｡₀:*ﾟ✲ﾟ*:₀｡♪

例）ブロックの高さ揃え♪

See the Pen box height arrangement by Saki (@SAKI) on CodePen.

ブラウザをリサイズして試してみてね٩(๑❛ᴗ❛๑)۶