ブラウザのサイズを変更する際、そのリサイズ操作中には同じイベントが発動し続けます。
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.
ブラウザをリサイズして試してみてね٩(๑❛ᴗ❛๑)۶
