lodashでイベントを間引く。イベントの終了後にしたり、イベントを何秒ごとに区切ったり。

qiita.com

この記事が参考になります。

throttleを使うと、何秒ごとにイベントを起こす、のように出来ます。

this.elms.forEach(elm => {
  window.addEventListener(
    'scroll',
    throttle(() => {
      elm.style.left = `-${pageXOffset}px`;
    }, 20)
  );
});

上記の書き方だとスクロール中20m秒ごとに関数が動きます。

debounceを使うと、そのイベント終了後に関数を動かせます。

this.elms.forEach(elm => {
  window.addEventListener(
    'scroll',
   debounce(() => {
      elm.style.left = `-${pageXOffset}px`;
    }, 20)
  );
});

上記の書き方だとscrollが終了後20m秒後に関数が動きます。