Throttle function
Creates a throttled function that only invokes the provided function at most once per every wait
milliseconds
- Use
setTimeout()
andclearTimeout()
to throttle the given method,fn
. - Use
Function.prototype.apply()
to apply thethis
context to the function and provide the necessaryarguments
. - Use
Date.now()
to keep track of the last time the throttled function was invoked. - Use a variable,
inThrottle
, to prevent a race condition between the first execution offn
and the next loop. - Omit the second argument,
wait
, to set the timeout at a default of0
ms.
const throttle = (fn, wait) => { let inThrottle, lastFn, lastTime; return function() { const context = this, args = arguments; if (!inThrottle) { fn.apply(context, args); lastTime = Date.now(); inThrottle = true; } else { clearTimeout(lastFn); lastFn = setTimeout(function() { if (Date.now() - lastTime >= wait) { fn.apply(context, args); lastTime = Date.now(); } }, Math.max(wait - (Date.now() - lastTime), 0)); } }; }; window.addEventListener( 'resize', throttle(function(evt) { console.log(window.innerWidth); console.log(window.innerHeight); }, 250) ); // Will log the window dimensions at most every 250ms