I’m learning throttling and I’m having an issue where my throttle method is not waiting the limit time to run.
const display = (msg) => {
console.log(msg). // I know this function does not do anything, but I'm trying to understand how I can call a function inside my throttle.
}
const throttle = (func, limit) => {
let flag = true;
return function() {
if(flag) {
func.apply(this, arguments);
flag = false;
setTimeout(() => flag = true, limit);
}
}
}
const throttleDisplay = () => {
return throttle(display("Hi"), 6000);
}
for(let i=1; i<=10; i++) {
setTimeout(throttleDisplay, i*1000);
}
My output is “Hi” 10 times, but I shouldn’t have 10 times Hi because I have a 6s wait between one call and another.
Advertisement
Answer
throttle takes a callback as a parameter, but you’re invoking display immediately.
const throttleDisplay = () => {
return throttle(display("Hi"), 6000);
}
is exactly equivalent to
const throttleDisplay = () => {
const result = display("Hi");
return throttle(result, 6000);
}
See the problem?
You need a function that invokes display with the argument you want instead:
const throttleDisplay = () => {
return throttle(() => display("Hi"), 6000);
}