こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptでウィンドウのリサイズ完了後に処理を実行する方法をご紹介しています。

ウィンドウをリサイズした後に一度だけ処理を実行させたいんだけど、良い方法ないかな?

上記の疑問にお答えします。

本記事でやりたいこと

タイトルにもあるように、ウィンドウのリサイズ完了後に処理を実行する、です。

JavaScriptでリサイズイベントをイベントリスナーに登録すると、ウィンドウサイズが変更された際にイベントが発火し、処理が走ります。そのためリサイズしている間に何度も処理が実行されることになります。処理内容によってはかなりの負荷をブラウザにかけることになってしまいます。基本的なリサイズ処理はリサイズが完了した後に処理を実行できればいいので、リサイズ完了後に処理が実行されるようにスクリプトを組んでみたいと思います。

早速やってみましょう!

リサイズイベントをイベントリスナーに登録する

まずは最初の一歩ということで、リサイズイベントをイベントリスナーに登録します。addEventListener()のイベント種別にresizeを指定することで登録することができます。

window.addEventListener("resize", ()=>{
    //ここにリサイズした後に実行したい処理を記述
    console.log("resize");
}, false);

コメントアウトしている行にリサイズイベントが発火した際の処理内容を記述します。そうすることで、リサイズした後に任意のスクリプトを実行することができます。

しかし、この方法ですとリサイズしている間に処理が何度も実行されることになります。なので少し工夫してリサイズしている間は処理を止め、リサイズが完了した際に処理が実行されるようにします。

setTimeout()/clearTimeout()で実行タイミングを制御する

こちらが完成ソースです。前項の内容に少し追記しています。

ES2015~

const resize = ()=>{

    let timeoutID = 0;
    let delay = 500;

    window.addEventListener("resize", ()=>{
        clearTimeout(timeoutID);
        timeoutID = setTimeout(()=>{

            //ここにリサイズした後に実行したい処理を記述
            console.log("resize");

        }, delay);
    }, false);
};

resize();

~ES5

var resize = function(){

    var timeoutID = 0;
    var delay = 500;

    window.addEventListener("resize", function(){
        clearTimeout(timeoutID);
        timeoutID = setTimeout(function(){

            //ここにリサイズした後に実行したい処理を記述
            console.log("resize");

        }, delay);
    }, false);
};

resize();

処理の流れとしては下記のようになります。

  • ウィンドウサイズが変わるとリサイズイベントが発火
  • clearTimeout()timeoutIDに登録されている処理をクリアする(初回IDは「0」)
  • setTimeout()timeoutIDに処理を登録する
  • 処理終了

setTimeout()の返り値であるtimeoutIDと、timeoutIDの処理をクリアすることができるclearTimeout()を使用して、リサイズしている間の処理をクリアし続け、リサイズが完了した際にだけ処理を実行する方法で実現しています。

結果的に一番最後のtimeoutIDに登録された処理のみが実行されるため、一度だけ処理を実行させる、という要件を実現することができます!

最後に

リサイズして何かしたい! という要望は見た目に関する処理が多いかなと思います。基本的にそこまで重い処理にならない場合が多いですが、必要のない負荷を避けることでユーザーにとってもサイトにとっても良い結果となりますので、ぜひ色々なサイトで活用していただければと思います!

以上、JavaScriptでウィンドウのリサイズ完了後に処理を実行する方法のご紹介でした!

JavaScriptを体系的に学びたい方

下記の参考書がおすすめです。私も勉強を始めた際に購入しました。入門書として必要な基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。