BLOG

jQueryを使わなくてもresizeイベントの回数を減らせる

| JavaScript

毎日、記事を書こうと思っていたのに結構出来てないですね。
ちょっと反省をしている、masa44です。
気張らずに、書ける時に書いていこうと思います。
さて今回は、resizeイベントについてです。
resizeイベントってwindowのサイズを変更した時に発生するイベントです。
バッと広げたり狭めたりするときに結構な回数がイベントとして発生してしまいます。
負担がいっぱいかかるので少しでも減らしたい、しかも少しでも軽くしたかったので、jQueryを使わない方法を紹介したいと思います。

早速ですが、コードは以下になります。

var timer = 0;
window.onresize = function () {
if (timer > 0) {
clearTimeout(timer);
}

timer = setTimeout(function () {
// ここに処理が入ります。
}, 200);
};

見てもらえればわかると思いますが、setTimeoutを使って、動かしている間、イベントは発生してますが、チェックをするだけの処理となるので、javascriptの処理自体は動いていません。
ここに処理が入ります。って部分にjavascript等の処理を書いてもらえるだけでOKとなります。
簡単なことですが、少しでも軽快に動かすためにするちょっとの手間です。
そのちょっとの手間が積み重なって、良いサイトとなる・・・はず・・・です。
ですので、ちょっとの手間を惜しまずに良いサイトを作っていきたいですね。
では、今回はこれで!

RECENT POSTS

「reduce」を使って配列を値を処理する

data属性の取得・設定・更新【JavaScript】

変数のタイプを調べる、変換する 【Javascript】

VS CodeでLive Serverを使ってプレビューのリロードをしてみよう

メディアクエリでhoverが使えるデバイスかどうか

markdown-wasmというすごく高速なMarkdownパーサー

SNSシェアボタンをオリジナルで設置する

CSSでマスクする

クリッカブルマップのレスポンシブ対応ができる「image-map-resizer」が優秀らしい

我が家の植物たち

CATEGORY

POPULAR POSTS

PAGE TOP