MW211 EXIT

devlog
jQuery/ウインドウのリサイズイベントを完了後に実行
2017年06月26日
┌──────────────────────────────────────┐
│$(function() {                                                              │
│    $(window).resize(function() {                                           │
│        // イベント関数                                                     │
│    });                                                                     │
│});                                                                         │
└──────────────────────────────────────┘
ウインドウのリサイズイベントに応じてイベントを実行するには、
上記のように処理を実装すればよい。

但し、ブラウザによっては、リサイズ中にイベントが多発する可能性がある。

そこで、イベント完了後にのみイベントを実行させる方法。
┌──────────────────────────────────────┐
│var gTimer = false;                                                         │
│$(function() {                                                              │
│    $(window).resize(function() {                                           │
│        if (gTimer !== false) {                                             │
│            clearTimeout(gTimer);                                           │
│        }                                                                   │
│        gTimer = setTimeout(function() {                                    │
│            // イベント関数                                                 │
│        }, 200);                                                            │
│    });                                                                     │
│});                                                                         │
└──────────────────────────────────────┘
リサイズ完了後、0.2秒後に処理を実行するようにしている。
但し、リサイズ中に毎回それがリセットされるので、
本当にリサイズが完了してから、0.2秒後に処理が実行される仕組みとなっている。
分類:jQuery