最近JavaScriptとjQueryを勉強しました。
まだリファレンスには弱いですが、構文は読めるようになりました。
※無名関数とか難しかった。
で、またハマりました。毎回ハマっているので
そろそろ「ハマりのアイパー隊長」とか呼ばれそうです。
windowsサイズ(ブラウザの画面サイズ)の変更をキャッチする処理が必要になった。
すべてはここからはじまった。。。
さて、今回はjQueryを使って、「ブラウザのサイズが変わったら
サイトをリロードする」って処理を追加しようと思い、下記を追加しました。
- 追加した記述
$(window).resize(function() { location.reload(); }
jQueryのメソッドresize()はブラウザのウィンドウサイズがかわったら
イベントをキャッチし、内部の処理を実行します。
で、やってみたところ
お?おお?
おおおおおおおおおおおおおおおおおおおおおおおおおおおお!!!???
(°Д° )
ブラウザがリロードしまくって固まるという自体に。
色々調べた結果、どうやらこれはいけない書き方らしい。
resize()はちょっとサイズを変更しただけでも動作する。
そのため、普通にブラウザのサイズを変更した場合は
キャッチする回数が大変なことになるらしい。
と、いうわけで、さっきの記載方法はNGで
次は下記記述に直しました。
var timer = false; $(window).resize(function() { if (timer !== false) { clearTimeout(timer); } timer = setTimeout(function() { console.log('resized'); location.reload(); }, 200);
どうやらみなさんもresize()を使うとき
一度は経験することなのか
Webの情報はほとんど上の書き方だったので
そんなには困りませんでした。
大変だったのはこのあとでした。
上記に書きなおしたあと実行。
お?できたかも!
と、喜びもつかの間
リロード1秒後に
あれ?リロードした?
あれ?あれれれれれ??????
ここからリロードの嵐が始まる!!
無限ループや!!
もちろん私はブラウザのサイズなんて変えていません。
(´・ω・)?
ずっとこんな顔しながらデバッグしてみました。
事象をまとめてみると・・・
・ブラウザのサイズ変える動きはしていないが
先程記述の関数が実行される。
・リロード1〜2秒後に実行される。
・ちなみにブラウザはGoogle Chrome
そして、ひとつの答えがでてきました。
Google Chromeの翻訳バーでした
うーんと、なんでこういうことになったか
めっちゃ単純な話。
リロード後
リロード1秒後
お分かり頂けただろうか?
翻訳バーが上からでてくると、どうやらウィンドウサイズが変わるようです。
(°Д°)ジーザス
ちなみに、回避方法はいまいちわかりません。
ということはlocation.reload()は使えないということですね。 orz