An ES6 implementation of the debounce function. "Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called. As in 'execute this function only if 100 milliseconds have passed without it being called.'" - CSS-Tricks (https://css-tricks.com/the-difference-between-throttling-and-debounc…

debounce.js

function debounce(callback, wait, immediate = false) {
  let timeout = null 
  
  return function() {
    const callNow = immediate && !timeout
    const next = () => callback.apply(this, arguments)
    
    clearTimeout(timeout)
    timeout = setTimeout(next, wait)

    if (callNow) {
      next()
    }
  }
}

/** 
 * Normal event
 * event      | |      |
 * time     ----------------
 * callback   | |      |
 *
 * Call log only when it's been 100ms since the last sroll
 * scroll     | |      |
 * time     ----------------
 * callback         |      | 
 *              |100|  |100|
 */

const handleScroll = debounce((arg, event) => {
  console.log(`${arg} ${event.type}`)
}, 100, true)

window.addEventListener('scroll', (event) => {
  handleScroll('Event is:', event)
})