【JavaScript】スクロールイベントを間引くthrottle関数

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

前回の記事の続きになります。

スクロールイベントを実行すると、スクロールの度に処理が高速で複数回繰り返され、その数が極端に多くなると処理負荷が非常に大きくなり、ページのスクロールがカクついたり表示が遅くなるおそれがあります。

そこで、インターバルを設けて、インターバル以内のスクロールに対しては処理が実行されないような関数を作ります。

この関数はthrottle関数と呼ばれ、要するに処理を間引く働きをします。

throttle関数の作成

const throttle = function(fn,interval) {
  let lastTime = Date.now() - interval;
  return function() {
    if((lastTime + interval) < Date.now()) {
      lastTime = Date.now();
      fn();
    }
  }
}

この関数 throttle(“関数”, “インターバル”); をスクロールイベントの処理の中に入れ込みます。なお、第一引数に間引きたい関数、第二引数にインターバル（単位：ミリ秒）を設定します。

【参考サイト】
スクロールのイベントを間引くthrottle – Qiita

throttle関数の導入

間引き処理（throottle関数）あり

See the Pen
Scroll-Animation (Throttle) by Michael (@colorpiece)
on CodePen.

インターバルは500ミリ秒＝0.5秒にしています。

間引き処理（throottle関数）なし

See the Pen
Scroll-Animation by Michael (@colorpiece)
on CodePen.

右上の座標の数字に注目して両者をスクロールしてみてください。

明らかに挙動が異なることがわかると思います。間引き処理を入れた方では、処理回数が少なくなっているため、数字の変化が飛び飛びになっているように見えます。（具体的には、スクロールしても0.5秒に一回しか処理が行われていません）

アニメーション自体に不自然さが残らないよう、インターバル値はお好みで調節してください。

おわりに

もし「同じようにやったのに上手くいかない」等の質問やスクロールアニメーション実装の依頼がありましたら、お気軽にお問い合わせフォームよりご連絡ください。