JavaScript - 画面サイズが変更されたときに処理を呼び出す

画面サイズが変更されたときに処理を呼び出す: resize

resize イベントは、ブラウザのウィンドウサイズが変更されたときに発生します。

window.addEventListener("resize", function(event) {
  console.log("ブラウザのウィンドウサイズが変更されました");
});

window.onresize プロパティでも上記と同様の処理を実装できます。

function resize() { 
  console.log("ブラウザのウィンドウサイズが変更されました");
}

window.onresize = resize;

resize イベントや window.onresize プロパティは、高頻度で発生する可能性があるため、イベントハンドラーは DOM の変更などの計算負荷の高い操作を実行しないでください。対策手段として、リサイズ後に処理を行うなどの方法があります。下記の例では、リサイズの１秒後にタイマーを設置しておき、リサイズのイベント毎にタイマーを解除する仕組みを実装しています。このような方法では、リサイズが１秒以上行われなかったときのみ、リサイズ後の処理が実行されます。

var resizeTimer;
 
window.addEventListener('resize', function (event) {

  if (!resizeTimer) {
    clearTimeout(resizeTimer);
  }
  
  resizeTimer = setTimeout(function () {
    onResize();
  }, 1000);
});

// リサイズ後の処理
function onResize(){}