JavaScriptで、リサイズを終了したタイミングで処理を実行する方法についての覚書です。

リサイズ終了時に処理を実行する

JavaScriptで、リサイズを終了したタイミングで処理を実行したい時には、resizeイベントとsetTimeout()を使用します。

var resizeTimer = false;

 window.addEventListener('resize', function () {
   // リサイズ中はタイマーを解除	
   console.log('resizing');
   if (resizeTimer !== false) {
     clearTimeout(resizeTimer);
   }
   
   resizeTimer = setTimeout(function () {
     // リサイズ完了後の処理
     console.log('window resized!');
   }, 500);
 });

リサイズ中はclearTimeoutでタイマーを解除するので、リサイズが完了した500ミリ秒後に処理が実行されます。