【JavaScript】ウィンドウのリサイズ完了後に処理を実行する

こんにちは、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();

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