JavaScript - 2020-08-10

ウインドウのリサイズが終わったときに処理をする方法

リサイズされたときに処理をしたい場合に「.resize()」使うと思いますが「.resize()」を使用するとリサイズされている間ずっと処理が走ってしまいます。
そこでリサイズが終わったタイミングで処理を走らせる方法になります。

var finishResize = function () {
  var timer = false;
  var $window = $(window);
  var windowW = $window.width();
  var windowH = $window.height();

  $window.resize(function() {
      if (timer !== false) {
          clearTimeout(timer);
      }
      timer = setTimeout(function() {
        // ここに終了時の処理
        windowW = $window.width();
        windowH = $window.height();
        console.log('finish');
      }, 200); // リサイズとリサイズの間隔を判定する
  });

}
finishResize();
Related Posts

Related Posts

slick.jsにオートプレイの切り替えボタンをつける方法

2022-06-22

WebStorageを使って初回アクセス時だけLoadingを表示する方法

2022-01-11

ロードアニメーションを表示中、スクロールを禁止する方法

2022-01-25

脱JQuery!JavaScriptでハンバーガーメニューを実装する(JQueryのサンプルあり)

2020-07-01