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