I'm trying to write a debounce function with typescript.
I found an example of it in here. Code follows:
export function debounce<Params extends any[]>(
func: (...args: Params) => any,
timeout: number,
): (...args: Params) => void {
let timer: NodeJS.Timeout
return (...args: Params) => {
clearTimeout(timer)
timer = setTimeout(() => {
func(...args)
}, timeout)
}
}
Problem is:
Thanks.
The debounce() function forces a function to wait a certain amount of time before running again. The function is built to limit the number of times a function is called. The Send Request() function is debounced. Requests are sent only after fixed time intervals regardless of how many times the user presses the button.
Debouncing is a technique where we can monitor the time delay of user action and once that delay reaches our predetermined threshold we can can make the function call. Throttling is a technique where we make the function call in a predetermined time interval irrespective of continuous user actions.
How do you use your debounce
function? I prepare fiddle, you can check working solution here
function debounce<Params extends any[]>(
func: (...args: Params) => any,
timeout: number,
): (...args: Params) => void {
let timer: NodeJS.Timeout
return (...args: Params) => {
clearTimeout(timer)
timer = setTimeout(() => {
func(...args)
}, timeout)
}
}
function test(message) {
alert(message);
}
const debouncedTest = debounce(test, 2000);
debouncedTest('message');
Well, it's not typescript troubles
This is intended as a supplement to Saveli Tomac's excellent answer.
In the comments I said I didn't think that implementation was particularly good. In particular it has two problems:
this
value.Here's an example that fixes these:
const debounce = (n: number, fn: (...params: any[]) => any, immed: boolean = false) => {
let timer: number | undefined = undefined;
return function (this: any, ...args: any[]) {
if (timer === undefined && immed) {
fn.apply(this, args);
}
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), n);
return timer;
}
};
Typescript Playground
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With