<main>
  <div class="count">
  <div class="scroll-count">
    <p>
      Scroll event listener: <span id="scroll-count"></span>
    </p>
  </div>
  <div class="throttle-count">
    <p>
      Throttle count: <span id="throttle-count"></span> <br>
      <input type="range" id="throttle-range" value="250" min="50" max="2000" step="50"><br>
      <small>(every <span id="throttle-time">250</span>ms while user is scrolling)</small>
    </p>
  </div>
  <div class="debounce-count">
    <p>
      Debounce count: <span id="debounce-count"></span> <br>
      <input type="range" id="debounce-range" value="250" min="50" max="2000" step="50"><br>
      <small>(when user hasn't scrolled in <span id="debounce-time">250</span>ms)</small>
    </p>
  </div>
    </div>
</main>

<footer>
  <p>
    Pen by <a href="https://www.jemimaabu.com" target="_blank">Jemima Abu</a><span style="color: #D11E15"> &#9829;</span>
  </p>
</footer>

body {
  margin: 0;
  text-align: center;
  background: linear-gradient(200deg, #b7b7b7, #f4df4f, #7a6f27 );
  background-size: 300% 300%;
  -webkit-animation: movebg 10s ease infinite;
  -moz-animation: movebg 10s ease infinite;
  -o-animation: movebg 10s ease infinite;
  animation: movebg 10s ease infinite;
}

input {
  font: inherit;
}

main {
  height: 500vh;
}

.count {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: max-content;
  font-family: system-ui, Roboto, Arial, sans-serif;
  font-size: 1.4em;
  line-height: 1.6;
  color: #242424;
}


footer {
  text-align: center;
  padding: 0.5rem 0;
  background-color: #eaeaea;
}

footer p {
  font-size: 0.75rem;
  margin: 0.25rem 0;
  color: #221133;
}

footer a {
  text-decoration: none;
  color: inherit;
}

@keyframes movebg {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

const scrollCountText = document.getElementById("scroll-count");
const throttleCountText = document.getElementById("throttle-count");
const debounceCountText = document.getElementById("debounce-count");
const debounceRange = document.getElementById("debounce-range");
const throttleRange = document.getElementById("throttle-range");
const debounceTimeText = document.getElementById("debounce-time");
const throttleTimeText = document.getElementById("throttle-time");


let scrollCount = 0;
let throttleCount = 0;
let debounceCount = 0;
let throttleTime = 250;
let debounceTime = 250;

debounceRange.addEventListener(
  "input",
  () => {
    debounceTimeText.innerHTML = debounceRange.value;
    debounceTime = debounceRange.value;
  },
  false
);

throttleRange.addEventListener(
  "input",
  () => {
    throttleTimeText.innerHTML = throttleRange.value;
    throttleTime = throttleRange.value;
  },
  false
);

let throttlePause;
let debounceTimer;

const throttle = (callback, time) => {
  if (throttlePause) return;

  throttlePause = true;
  setTimeout(() => {
    callback();
    throttlePause = false;
  }, time);
};

const debounce = (callback, time) => {
  window.clearTimeout(debounceTimer);
  debounceTimer = window.setTimeout(callback, time);
};

const updateScrollCount = () => {
  scrollCount++;
  scrollCountText.innerHTML = scrollCount;
};

const updateThrottleCount = () => {
  throttleCount++;
  throttleCountText.innerHTML = throttleCount;
};

const updateDebounceCount = () => {
  debounceCount++;
  debounceCountText.innerHTML = debounceCount;
};

window.addEventListener("scroll", () => {
  updateScrollCount();
  throttle(updateThrottleCount, throttleTime);
  debounce(updateDebounceCount, debounceTime);
});