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 を行うっていう時間の指定です。


コメントをどうぞ

技術の記事

  1. YAZIUP_ストレス社会を乗り切るために!耐性を高めよう
    苦しんでいる貴方へ贈るアイデア発想法(後編)
  2. YAZIUP_ストレス社会を乗り切るために!耐性を高めよう
    苦しんでいる貴方へ贈るアイデア発想法(前編)
  3. 2
    photoshopで簡単な加工からそれなりに綺麗にする方法
  4. pixta_4153512_M
    夏バテ気味のようです。

おすすめ記事

  1. ジョブズ4
    人生の点と点をつなげて線にする『自分史』。
  2. スギ花粉
    鼻がムズムズ目がカユカユな花粉症についてまとめてみた
  3. 『テレビ観ないんだよね…』と言うのがかっこいいと思っている人に告ぐ!
  4. 出典:無料壁紙:格闘技がテーマの写真やイラスト画像まとめ(格闘家・ブルースリー)
    ブルース・リーの出身地ってどこだかわかりますか?
  5. 月額課金地獄
    ネットサービスの月額課金地獄沼にハマる方法
  6. ハイビスカス
    ウチナーンチュが沖縄に帰った時に必ず行くお店10選+α
  7. イニシャルサイトコーポレートサイト
    コーポレートサイトをリニューアルしました
  8. なんでもQ
    相談Q&Aサイト「なんでもQ」開発中です!
  9. さんぽすフォトコンペ開催中
    今年もさんぽすフォトコンペ開催しました!

人気の記事

  1. ファミコン
    パズドラ、モンスト、白猫に続く次のゲームは…?
  2. konagaya_20150303
    日常でつい使ってしまう間違えやすい日本語
  3. クロックスの偽物と本物の違い
    クロックスの本物と偽物の違いを比べてみました
  4. konagaya20150513
    初心者でも気軽に登れて絶景が見れる山