wait
millisecondssetTimeout()
and clearTimeout()
to throttle the given method, fn
.Function.prototype.apply()
to apply the this
context to the function and provide the necessary arguments
.Date.now()
to keep track of the last time the throttled function was invoked.inThrottle
, to prevent a race condition between the first execution of fn
and the next loop.wait
, to set the timeout at a default of 0
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
Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️