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

タイトルに書いてあることを実現しようとして、少し悩んだのでメモ。

ウインドウのリサイズ操作やjQueryに限らず、短い周期で連続してイベントが発生する場合に、一連の最後のイベントが発生した時にだけ何らかの処理を行いたい時に使えるパターンです。

何も工夫せずに書くと…

こんな感じになります。

ただこれだと、ウインドウをリサイズしている間(つまりウインドウの端っこをドラッグしている間)「何らかの処理」が非常に短い周期で何回も呼ばれてしまいます。上のコードだと、コンソールに「resized」が無数に出力されてしまいます。

これで問題ない場合もありますが、もし「何らかの処理」の実行にある程度の時間がかかる場合、ブラウザに負荷がかかったり、リサイズ操作が終わったあとも「何らかの処理」がしばらく続いてしまったり、といった問題が生じます。

リサイズ操作が終わった時だけ処理を実行する

そこで、以下のようにsetTimeout関数を利用します。こうすることで、リサイズ操作が終わった時だけ「何らかの処理」を実行できるようになります。

setTimeout関数は、第二引数に指定したミリ秒後に第1引数に渡した処理の実行を予約する関数です。一方、clearTimeout関数は、setTimeout関数で行った予約をキャンセルするためのもの。

順を追って処理を解説すると、

  1. (ウインドウのリサイズ操作がはじまる)
  2. resizeイベントが発生
  3. setTimeout関数が呼び出され、200ミリ秒後に「何らかの処理」が実行されるように予約される
  4. (引き続きウインドウのリサイズ操作が行われる)
  5. resizeイベントが発生
  6. clearTimeout関数が呼び出され、「何らかの処理」の予約がキャンセルされる
  7. 再び200ミリ秒後に「何らかの処理」の実行が予約される
  8. (略)
  9. (ウインドウのリサイズ操作終了)
  10. 予約されていた「何らかの処理」が実行される

こんな感じになります。

resizeイベントが発生するたびに、直前のresizeイベントで予約した処理をキャンセルしてるんですね。これで、リサイズ操作が終わった時にだけ「何らかの処理」が実行されます。

まとめ

冒頭にも書きましたが、ウインドウのリサイズ操作やjQueryに限らず、いろんな所でつかえるパターンだと思います。

「setTimeoutって面白い」って思ったのは僕だけでしょうか。え、常識?もうちょっと色々勉強します。

それでは!

参考ページ