プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
jQuery、画面のサイズが変更されたときに何か処理を行う
結論から書くと

var timer = false;
$(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        // リサイズ後に行う処理
    }, 200);
});

でOKです。

別に私が考えたわけじゃないですけどね。
こちらのステキな記事に書かれている内容を
丸パクリさせていただきましたφ(--)

■CreativeStyle 様
[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する

ありがたや~(-人-)

それでは経緯その他を書いていきます。

レスポンシブWebデザインなWebサイトにsuperTables付きの表を埋め込んだのですが、
スクロールバーの位置とかが画面ロード時に決定されるらしくてですね。
表示後に画面の大きさを変えるとズレちゃうのです(-A-)

PCで見るときはまだ許容できたのですが、スマホで見ると、こりゃダメだ。
スマホを傾けて縦から横にしたり横から縦にしたりすると
明らかに誤差では済まない状況になってしまいます。

仕方がないので、リサイズされたら画面を再読み込みすることにしました。

さてさて、どうやるんだい(--?

とGoogle先生に探してもらって見つかったのが、こちらのコードφ(--)

var timer = false;
$(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        // リサイズ後に行う処理
    }, 200);
});

こちらのステキな記事から丸パクリさせていただきましたφ(--)

■CreativeStyle 様
[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する

ありがとうございます(-人-)

ふむふむ。
なるほど。

画面の大きさをズリズリ変えると、
その間にresizeイベントが何回も発生するのだそうな。

だから

1.処理の実行をキャンセル
2.少し時間をおいて処理を実行


と実装しておくことで、

1回目のresizeイベントの「2.」で処理が予定される

1回目のresizeイベントで予定された処理(「2.」で指定した処理)は
2回目のresizeイベントの「1.」でキャンセルさせる

2回目のresizeイベントの「2.」で処理が予定される

2回目のresizeイベントで予定された処理(「2.」で指定した処理)は
3回目のresizeイベントの「1.」でキャンセルさせる

3回目のresizeイベントの「2.」で処理が予定される

(中略)

n回目のresizeイベントで予定された処理(「2.」で指定した処理)は
n+1回目のresizeイベントの「1.」でキャンセルさせる

n+1回目のresizeイベントの「2.」で処理が予定される

となって、最後のresizeイベントの「2.」で予定された処理は
次のresizeイベントが発生しないので、キャンセルされないで実行される。

結果として、画面のリサイズ直後に処理が1回だけ実行される、となる理屈ですね。

やったー!
考えてくれた人ありがとー!\(≧▽≦)/

……と喜んだのですが、罠がありました(-A-)
一回しか実行されなくて良いのに、スマホだと、たまに複数回実行されてしまうのです。

具体的には

var timer = false;
$(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        alert("再描画します");
        location.reload();

    }, 200);
});

と処理を書いたところ、

画面リサイズ
 ↓
「再描画します」のメッセージ表示
 ↓
画面再表示
 ↓
「再描画します」のメッセージ表示
 ↓
画面再表示

となってしまうケースがありました。
スマホ限定で、しかも常になるわけでなくて、最初の一回だけ(-A-)

具体的には

1.画面表示

2.画面リサイズ(スマホを横にする)

3.「再描画します」のメッセージ表示
  ↓
 画面再表示
  ↓
 「再描画します」のメッセージ表示
  ↓
 画面再表示
 ※画面が2回再表示される

4.画面リサイズ(スマホを縦にする)

5.「再描画します」のメッセージ表示
  ↓
 画面再表示
 ※画面が1回だけ再表示される(正常な動作)

な動きをしています。
Androidは手元に無いので確認していませんが、
iPhoneさんでは、そのような動きになりました(-A-)

最終的には解決しましたが、これに苦しめられましてね。
ちょー涙目になったのです。

それではどうやって解決したかですが……

長くなったので、解決方法は次の記事

jQuery、スマホを傾けたとき(画面の幅が変更されたとき)に何か処理を行う

に書きますね。

というわけで、次回に続く\(--)/
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:● JavaScript  thema:システム開発 - genre:コンピュータ  Posted by ササキマコト 

  関連記事