tobbbe
8/21/2017 - 2:23 PM

An ES6 implementation of the debounce function. "Debouncing enforces that a function not be called again until a certain amount of time has

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-debouncing/)

debounce.js
content_copyfile_download
function debounce(callback, wait, context = this) {
  let timeout = null 
  let callbackArgs = null
  
  const later = () => callback.apply(context, callbackArgs)
  
  return function() {
    callbackArgs = arguments
    clearTimeout(timeout)
    timeout = setTimeout(later, wait)
  }
}

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

/* usage
const handleScroll = debounce((e) => {
  console.log('Window scrolled.')
}, 100)

window.addEventListener('scroll', handleScroll)
*/