[jQuery]ウィンドウのリサイズ処理

jQuery ウィンドウのリサイズ処理

概要

ブラウザのサイズを変更すると発火します。

構文

$(セレクタ).resize();
$(セレクタ).resize([object,] fn);

使い方

$(セレクタ).on('resize', fn)
でも書けます。
※onメソッドの詳細はここ

<button>Click!!!</button>
<p>Window幅が出るよ</p>

$(function() {
    var str = "";
    var num = 0;
    $('button').on('click', function(){
        $(window).resize();
    });
    $(window).resize(function(){
        num++;
        str = "Width: " + $(window).width() + "<br>";
        str += "resize回数: " + num;
        $('p').html(str);
    });
});

pタグ内に、ブラウザの幅とリサイズ回数が表示されます。
発動条件は、

• ボタンがクリックされる
• ブラウザのサイズを変更する

です。

クリックについては、 .on('click', fn) で、$(window).resize() が発動するため、$(window).resize(fn) が発火します。
ブラウザのサイズ変更をしても同様で、$(window).resize(fn)が発火します。
第一引数にobjectのデータを持たせることも出来ます。

$(function() {
    $(window).resize({number: 10}, function(e){
        $('p').text(e.data.number);
    });
});

ブラウザサイズを変更する度に、「10」がpタグ内のテキストとして上書きされます。

※参考※
jQuery リファレンス：resize

ブラウザ変更中は発動させないようにしたい

ブラウザのサイズを変更する度に発火させていると、ブラウザに負荷が掛かります。
前項の例のように単純な事象ならいいのですが、複雑な処理をするとかになると思わぬ不具合が発生したりします。

そんなことを防ぐために、ブラウザサイズを変更している最中はresizeを発火させず、
setTimeoutを使用して、ブラウザサイズを変更完了した後にイベントを発火させるようにします。

Ex)ブラウザサイズ変更後にリサイズイベントを発火させる

$(function() {
    var timer = false;
    var num   = 0;
    $(window).resize(function() {
        if (timer !== false) clearTimeout(timer);
        timer = setTimeout(function() {
            num++;
            $('p').text(num + "回目の変更完了!!!!");
        }, 200);
    });
});

まず、発動条件としては200ミリ秒ブラウザサイズを変更しなければ発火します。
流れとしては、

1. 初期値では変数timerがfalseになっているので、setTimeoutを発動させる
   ※setTimeoutの戻り値で、ハンドル値が変数timerに入るのでfalseじゃなくなります。
2. ブラウザサイズを変更し続けている間、resizeイベントは発火しているが4行目のif文でsetTimeoutが解除されます(clearTimeout) ※clearTimeoutには戻り値はありません。
3. ブラウザサイズの変更を止めた、200ミリ秒後にsetTimeoutの関数が発火します。

※参考※
[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle
setTimeout