jQuery resizeとGoogle Chromeの翻訳バーでサイズが変わりまくってハマった

最近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の情報はほとんど上の書き方だったので
そんなには困りませんでした。

大変だったのはこのあとでした。

上記に書きなおしたあと実行。
お？できたかも！

と、喜びもつかの間
リロード１秒後に

あれ？リロードした？
あれ？あれれれれれ？？？？？？

ここからリロードの嵐が始まる！！
無限ループや！！

もちろん私はブラウザのサイズなんて変えていません。
（´・ω・）？
ずっとこんな顔しながらデバッグしてみました。

事象をまとめてみると・・・
・ブラウザのサイズ変える動きはしていないが
先程記述の関数が実行される。
・リロード１〜２秒後に実行される。
・ちなみにブラウザはGoogle Chrome

そして、ひとつの答えがでてきました。
Google Chromeの翻訳バーでした

うーんと、なんでこういうことになったか
めっちゃ単純な話。

リロード後

リロード１秒後

お分かり頂けただろうか？
翻訳バーが上からでてくると、どうやらウィンドウサイズが変わるようです。

（°Д°）ジーザス

ちなみに、回避方法はいまいちわかりません。
ということはlocation.reload()は使えないということですね。 orz