レスポンシブでＪＳ切り替えって難しい。

レスポンシブって、ワンソースだから更新とかべんりなんだけど、
ワンソースだからJSで困った。そんな話。

レスポンシブサイト制作で、コーディングしてJSでちょっと困ったことが起きた。

PCブラウザで表示せて、SPサイズにリサイズしたとき、関数を実行する処理を書いた。
スマフォについてはユーザーエージェント割り振りで処理を別にい書いてるからよかったんだけど。
PCはサイズでの切り替えしか思いつかなかった。

http://kadoppe.com/archives/2012/02/jquery-window-resize-event.html
↑この記事にウインドウのリサイズが終わったときの処理とかこちら参考にしましたん。
超便利これ。すごい。

でもさ、この切り替え、落とし穴があってさ……
まずPCリロード時に関数を読み込む。次に、リサイズ時にSPの関数を読み込む。

そうすると……両方の関数が読み込まれちゃう。
PCとSPの要素でJSがかぶったりしなかったら別にいいだろうけど、
実行されてるの、個人的にだいぶ気持ちがわるい。

これを解決するために、実行している関数をいったんリサイズ時に
リセットすればいいのかなーって思って頑張ってみたけど、難しかった。

リサイズ時にoffすればいいんじゃない？とかやってみたけど駄目だった。
んじゃ次は同じ関数名で上書き！とかおもったけど、ひどく工数がかかることに気が付いた。

結局、読み込み時にPC幅ならPCのclassをbodyに付ける。SP幅ならSPのclassを付けて、
関数内の実行するclassをPC、もしくはSPからたどることで、
そのサイズの時しか実行させないように解決させた。

でもなんか気持ちがわるいよねー。
毎回書き直すのとか、結構大変だから、関数リセットさせたら楽に使えるのになって思った。

まだそれをやるための知識はないから、今度やりたいと思う。
なんかいい案ないかなー……