Initial Site

Initial Site

Initial Site

jQuery のちょこっとメモ

  • ササキ  2015/02/26 12:44
jQueryメモ

制作していてこんなことしたいけど、どうやるんだ?って思ったとき調べたことのメモです。

イベントハンドラ(window.load とか reseize)を同時に指定したい(=同じ処理したい)!

レスポンシブサイトとかで使わないといかんって場面結構あると思います

ひとつひつ書くとこんな風に、処理A を三回も書かないといけない

$(function(){
$(window).load(function(){
//処理A
});
$(window).scroll(function(){
//処理A
});
$(window).resize(function(){
//処理A

});

});

けど、まとめて各以下の記述なら一回で済む

$(function(){
$(window).on('load scroll resize',function(){
//処理A
});
});

ウインドウの処理が終わったときだけに、resize 処理をいれたい
ふつうに書くと以下の記述で問題なくやってしまうのですが、同ページ内にいろいろな処理が書かれているとウインドウをリサイズしている間も処理が動いて余計な負荷がかかってしまいます。

$(window).resize(function() {
//処理B
});

そこで

リサイズが終わったときだけ処理をする方法に変えれば、よろしい事になるのでは


var timer = false;
$(window).resize(function() {
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
// 処理B
}, 200);
});

最後に書いてある 200 って数字は、 200ミリ秒(1秒=1000ミリ秒)後に 処理B を行うっていう時間の指定です。


この記事の作者

アバター
ササキ


総記事本数:23

コメントをどうぞ

知識の記事

  1. Young woman using a laptop computer. Graphic designer. UX design.
    仕事で大活躍のGoogle Chrome拡張機能を紹介
  2. 無題
    WordPressで出力内容が動的に変わる固定ページの<title>を変更
  3. ai_computer_sousa_robot
    【GAS】お手軽なOCRの自動化をスプレッドシートで扱いやすくする
  4. 無題
    暑い、暑いですね、会社(と紙)の話をします。

おすすめ記事

  1. 7Zdd0N3ez3tWXLf1577162732_1577162762
    「2019年最終週」事業レポート(12/23~12/27)
  2. 2vmuBJtYEC1oNxv1575967002_1575967016
    「波乱の幕開け」事業レポート(12/09~12/13)
  3. Qq6ekREW7NMriVV1575364443_1575364473
    「12月始まりました!」事業レポート(12/02~12/06)