ウィンドウリサイズ完了時に処理を実行する

NO IMAGE

JSでウィンドウリサイズ時の処理を書くと、リサイズしている間何回もその処理が呼び出されてしまいます。

今回はウィンドウリサイズが完了したら、処理を一度だけ実行するコードを書きます。

コード

var timeOutId = 0;
$(window).on('resize', function(){
    if (timeOutId > 0) {
        clearTimeout(timeOutId);
    }

    timeOutId = setTimeout(function(){
        // 処理を書く
    },200);
});

この書き方だとゆっくりとウィンドウをリサイズしたときは処理が何回も呼び出される可能性がありますが、基本的にはそのケースは気にしなくていいと思います。

参考サイト

ウィンドウリサイズ完了時に一度だけ関数を実行する|もっこりJavaScript|ANALOGIC(アナロジック)