<p class="cta">Scroll me</p>

<div class="event-counter">
  <div class="box">
    <p>No timing function</p>
    <span class="output vanilla">0</span>
  </div>

  <div class="box">
    <p>Throttled</p>
    <span class="output throttled">0</span>
  </div>

  <div class="box">
    <p>Debounced</p>
    <span class="output debounced">0</span>
  </div>
</div>

body {
  height: 5000vh;
  font-family: sans-serif;
  line-height: 1.5;
  color: #212121;
  background-color: #f5f5f5;
}

.cta {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.cta::before,
.cta::after {
  content: "\2193";
  margin-left: 4px;
  margin-right: 4px;
}

.event-counter {
  position: sticky;
  top: 100px;
  display: flex;
  justify-content: center;
}

.box {
  min-width: 160px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  margin-right: 8px;
  padding: 12px;
  border: 1px solid #03a9f4;
  border-radius: 4px;
}

.event-counter p {
  margin: 0;
  font-size: 16px;
}

.event-counter span {
  font-size: 48px;
  font-family: monospace;
}

const vanillaOutput = document.querySelector(".output.vanilla");
const throttledOutput = document.querySelector(".output.throttled");
const debouncedOutput = document.querySelector(".output.debounced");
const eventCounter = {
  vanilla: 0,
  throttled: 0,
  debounced: 0
};

document.addEventListener("scroll", () => {
  eventCounter.vanilla += 1;
  vanillaOutput.textContent = eventCounter.vanilla;
});

document.addEventListener(
  "scroll",
  _.throttle(() => {
    eventCounter.throttled += 1;
    throttledOutput.textContent = eventCounter.throttled;
  }, 300)
);

document.addEventListener(
  "scroll",
  _.debounce(() => {
    eventCounter.debounced += 1;
    debouncedOutput.textContent = eventCounter.debounced;
  }, 300)
);