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

jsのコード書いていて思いました。

スクロールの処理内にコンソールログ入れるととんでもない数出力されてしまう。

複数入れてるともっと出てきてしまう。

とういうことで処理を間引くことにしました。

スクロールイベントを間引いていく

間引くとどのぐらい違うか見ていこうと思うのでビフォーアフター見ていきましょう。

間引く前

まずこちらが間引く前です。

作りがお粗末で申し訳ないです。

スクロールすると左上の黒枠の数がすごい勢いで足されていくのがわかるかと思います。

間引いた後

setTimeoutを使った方法ですね。今回は余裕をもって100msに設定しました。

スクロールされるとタイマーが作動します。

clearTimeout関数でタイマーの初期化を行うため、作動してから100msの間にもう一度スクロール処理が入った場合には先ほどのタイマーは初期化され、新しいタイマーが作動します。

これにより、間引いているようになるわけです。5ms~10msぐらいが実用的な間引き方ではないでしょうか。

スクロール⇒タイマー作動(A)⇒100ms以内にスクロール⇒Aのタイマー消える(Aは実行されない)⇒タイマー作動(B)

throttleを使った間引き方もあります。

lodashというライブラリを使用します。自作も可能です。

こちらでは規定時間後に実行するという考え方です。

スクロール⇒前回作動から規定時間経過済み⇒作動⇒スクロール⇒規定時間たっていない⇒動作しない

こちらの方が間引く時間が正確に反映されています。

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>

CDNを利用します。

window.addEventListener("scroll" , _.throttle(cnt,SPEED),{passive: true});

_.throttleのように簡単に利用することができます。

throttleを自作する場合はこんな感じです。

var count = function(fn , delay) {
  	return function() { 
    	if( (time + delay) < Date.now()) {
        time = Date.now();
        fn();
      }
    }
};

間引くために指定した時間経過したら発火させる形です。