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

WordPressでIDから本文を取得する

[PHP] 配列内の空白を削除「array_filter」「array_diff」

[PHP] 配列内の同じ値をまとめる「array_unique」

WordPressのカスタムフィールドでソートする

連想配列から特定の値を取得して配列にいれちゃうってやつ

JavaScriptで取得するGETの値

【CSS】text-decorationのカスタマイズができるの知ってた?

CSSでフッターの下に隙間ができないように調整する

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

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

CATEGORY

POPULAR POSTS

PAGE TOP