スクロールのイベントを間引くthrottle

throttleで負荷軽減

scrollやresizeなど、連続してイベントが呼ばれてしまうため、
カクカクした動きになったりCPUに負荷をかけてしまうことがあります。

負荷軽減のためイベントの呼び出しは指定時間が経過した時や、
イベントの最後にだけ呼ばれるに呼ばれるようにします。

それを実現するものとして、
指定した時間間隔でイベントを発生させるthrottleと
連続したイベントの最後のみ処理するdebounceがあるようですが、今回はthrottleについてみていきます。

指定した時間間隔でイベントを発生させるthrottle

間引く前

See the Pen without throttle by sora (@sora888) on CodePen.

まず間引く前(throttle関数を使用しない時)のスクロールはこちら。 ばんばんイベント発生しているのがわかりますね。

間引き後　

See the Pen throttle example by sora (@sora888) on CodePen.

こっちが間引いた後のスクロール
間引く前と比べてイベント発生が減っているのがわかると思います。
このイベント発生は指定した時間によって調整ができます。

※1フレーム(1/60fps)＝ 1/60秒 = 約16ms

throttleを自作する

export const throttle = (fn: () => void, interval: number): (() => void) => {
  let time = Date.now() - interval;
  return () => {
    if (time + interval < Date.now()) {
      time = Date.now();
      fn();
    }
  };
};

ライブラリを使う

lodashが提供しているthrottleが使えます！

_.throttle(関数, wait時間)で囲むだけで実現できるので取り入れやすいですね。