throttleとdebounceを使って連続したイベント処理の負荷軽減を行う

// スクロールイベント
function scrollEvent() {
  console.log('スクロール!')
}

// 間引きをする時間
const delayTime = 1000

function throttle(fn, delay) {
  // 初回実行の為、runTimeに代入する値は、現在時刻より前に設定
  let runTime = Date.now() - delay
  return () => {
    // 前回実行した時間 + 間引き時間が、現在の時間より前の場合、引数に渡した関数を実行
    if ((runTime + delay) < Date.now()) {
      runTime = Date.now()
      fn()
    }
  }
}

window.addEventListener('scroll', throttle(scrollEvent, delayTime))

// スクロールイベント
function scrollEvent() {
  console.log('スクロール!')
}

// イベントを制限する時間
const intervalTime = 100

function debounce(fn, interval) {
  let timer
  return () => {
    // setTimeoutでinterval秒処理を待ち関数を実行
    // debounce関数ががinterval秒内で複数呼び出されても、都度clearTimeoutを実行し、最後の1回だけ実行する
    clearTimeout(timer)
    timer = setTimeout(function() {
      fn()
    }, interval)
    console.log(timer)
  }
}

window.addEventListener('scroll', debounce(scrollEvent, intervalTime))