【JavaScript】リサイズイベント時の処理を連続で発生させないようにする

ぽんきち

画面サイズが変わった時にJSで処理をしたいにゃ！

でも連続して処理されると負荷が多くなりそうでこわいにゃ。。。

画面サイズが変わった時（リサイズイベントが発生した時）にJSで処理を行うことがありますよね。ただリサイズのたびに処理が呼ばれると負荷が大きくなってサイトが重くなる可能性があるので、最低限の処理にしたいところです。そんなときに役立つJSの記述方法を記載します。

リサイズイベント時、一回だけJS処理を行う方法
1. 解説

リサイズイベント時、一回だけJS処理を行う方法

下記のような記述でイベントの連続発生を防ぐことができます。

let debounceTimeout;
const debounceDelay = 200;

window.addEventListener('resize', () => {
  
  clearTimeout(debounceTimeout);

 
  debounceTimeout = setTimeout(() => {
    // ここに実行したい処理を記述
    console.log("処理するよ");
  }, debounceDelay);
});

解説

実行したい処理を格納するための変数と、連続してイベントを発生させない時間を定義します。
※参考コードは200ミリ秒で指定。

let debounceTimeout;
const debounceDelay = 200;

リサイズイベントが呼び出されたときにclearTimeout()を呼び出してdebounceTimeoutをクリアしています。
その後改めてsetTimeout()を呼び出して200ミリ秒後に実行したい処理をセットし、debounceTimeoutに格納しています。

window.addEventListener('resize', () => {
  
  clearTimeout(debounceTimeout);

 
  debounceTimeout = setTimeout(() => {
    // ここに実行したい処理を記述
    console.log("処理するよ");
  }, debounceDelay);
});

リサイズ→予約処理クリア→200ミリ秒後の処理予約を繰り返しているわけですね。

上記の記述から、最後のリサイズが行われてから200ミリ秒経過したときにイベントが実行されるようになります。
その為、連続してリサイズが行われている時は200ミリ秒の間隔が空かない限りはイベントが実行されないわけです。

ぽんきち

これで安心してJS処理を書けるにゃ！！