<div class='container'>
  <div class='content'></div>
</div>
<div>
  throttle 이벤트 핸들러가 scroll 이벤트를 처리한 횟수: 
  <span class='throttle-count'>0</span>
</div>
<div>
  normal 이벤트 핸들러가 scroll 이벤트를 처리한 횟수: 
  <span class='normal-count'>0</span>
</div>
.container {
  width: 100%;
  height: 150px;
  background-color: orange;
  overflow: scroll;
}

.content {
  width: 100%;
  height: 1000vh;
}


.normal-count
.throttle-count {
  font-size: 20px;
}
const $container = document.querySelector(".container");
const $normalCount = document.querySelector(".normal-count");
const $throttleCount = document.querySelector(".throttle-count");

let normalCount = 0;
$container.addEventListener("scroll", () => {
  $normalCount.textContent = ++normalCount;
});

const throttle = (callback, delayTime) => {
  let timerId;

  return () => {
    if (timerId) return;

    timerId = setTimeout(() => {
      callback();
      timerId = null;
    }, delayTime);
  };
};

const throttleCallback = () => {
  console.log();
  $throttleCount.textContent = ++throttleCount;
};

let throttleCount = 0;
$container.addEventListener("scroll", throttle(throttleCallback, 1000));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.