1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Javascriptでウィンドウのリサイズ終了後に処理

Last updated at Posted at 2020-10-04

タイトルの通り
良く忘れるのでメモ

// リサイズが止まった後、指定時間(ミリ秒)後処理を行う
const term = 300;
// タイマーの受取変数
var timer = 0; 

// ウィンドウがリサイズされたとき
window.addEventListener("resize", function(){
    // リサイズしているときは、タイマーをリセットする
    clearTimeout(timer);

    // 指定時間後、一度だけ処理を実行
    timer = setTimeout(function(){
        // 実際の処理を記載↓↓
        alert("処理実行");
    }, term);
});

ブラウザのウィンドウをリサイズしたときに画面の表示を変更するような処理では、resizeのfunction直下に書くと、描画処理が多すぎてえらいことになるので、こんな風にすると良い。
※記載しているコメントの解釈が若干間違っているかも、、、
※IEは画面読み込み時にも処理が走ってしまいます、、 ifでtimer>0とか入れると良いかと

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?