0-9
イベントの間引き方

JSでイベント関連の実装をする場合、頻繁に発生するイベントを間引きたくなる事がある。
例えばwindow.scrollやwindos.resize、mouseover何かは状況によってrequestAnimationFrameを超える頻度で発生するので、特に重い処理を実行する場合などはある程度イベントを無視しないとUIがロックされてしまう。
また、スマホや古いバージョンのブラウザなんかも処理速度の問題で間引く必要が出てくる。

こう言う処理は一般にthrottleとかdebounceと呼ばれてて(一応それぞれ違う動作を指す)検索すると公開された実装があるけど、とりあえずjQuery.throttleを使えばいい感じにしてくれる。
ただ、jQuery使ってないとか、ちょっと使いたいだけとかいうならこんな感じのコードでもいける。

window.onscroll = function hoge () {
hoge.i = hoge.i || 0;
if (hoge.i++%2) return;
// eventhandler
}

この方法は簡単だしブラウザ問わず使えるのでちょっと間引きたい場合はオススメ。
ただ、単純に2回に1回実行するようにしただけなので、呼び出し間隔が十分に空いてても間引くし、最後の一回が呼び出されるかどうかも運になる。

他にsetTimeoutを使う方法もあるけど、もしsetTimeout使うならrequestAbimationFrameもオススメ。
特にできるだけ高い頻度で実行したいけど、無駄なイベントは処理したくないって時はこれ使うとうまくやってくれる。

  1. oosugi200-9からリブログしました
  2. 0-9の投稿です