【処理を最小限に！】ウインドウリサイズが終わった時にだけ処理を実行するjs

Web2017年6月19日

レスポンシブWebデザインのサイト設計の際、何かしらの機能をjsで作る場合にリサイズを検知して処理を行いたい場合があります。わりと簡単にリサイズ検知自体は行うことができるのですが、本記事では「リサイズが終わった場合のみ」に処理を実行する省エネな書き方をご紹介させていただきたいと思います。

サンプルコード

リサイズ中、常に実行されてしまう書き方

$(window).resize(function() {
    alert("リサイズ実行");
});

上記でもやりたいことは実現できるのですが、これですとリサイズを行っている間（ウインドウをドラッグしている間）常に実行されることになり、何回もアラートが表示されることになります。処理としては重くなってしまい、あまりよろしくありません。

リサイズが終わった場合のみに実行されるおすすめな書き方

var $resizeTimer = false;
$(window).resize(function() {
    if ($resizeTimer !== false) {
        clearTimeout($resizeTimer);
    }
    $resizeTimer = setTimeout(function() {
        
        alert("リサイズが終わりました");
        
    }, 100);
});

※jQueryを読み込んでいる場合のスクリプトとなります

setTimeout関数とclearTimeout関数を使って、リサイズが終わった場合のみに処理が行われるようにしています。

まず、あらかじめ変数$resizeTimerのフラグをfalseにしておきます。リサイズが行われたらsetTimeout関数を呼び出し、0.1秒後にalertが実行されるようにしています。0.1秒経過する前に続けてリサイズが行われていればclearTimeout関数でalertをキャンセルすることで、リサイズ中はalertが表示されないようにしています。

まとめ

レスポンシブWebデザインに対応したカルーセルなど、cssだけで対応できないリサイズ処理を行う場合にこのjsでのリサイズ処理を知っておくとイイ感じのjs開発が可能になります。jsでリサイズ処理を行いたい場合は、ぜひ本記事をご参考にしていただければ幸いです。

この記事を読んでいる方にオススメの記事

「Web」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。