Debounced Function in JavaScript

Function as an argument and returns a debounced version:

To create a function that takes another function as an argument and returns a debounced version of it, you can implement a debouncing mechanism. Debouncing is a technique used to limit the rate at which a function is invoked, typically to improve performance by ensuring that expensive operations are only executed after a certain amount of time has passed since the last invocation.

Here's how you can implement a function that takes another function as an argument and returns a debounced version of it:

1
function debounce(func, delay) {
2
let timeoutId;
3
4
return function debounced(...args) {
5
const context = this;
6
7
clearTimeout(timeoutId);
8
9
timeoutId = setTimeout(() => {
10
func.apply(context, args);
11
}, delay);
12
};
13
}
14
15
// Example usage:
16
function myFunction() {
17
console.log('Function debounced');
18
}
19
20
// Debounce myFunction with a delay of 1000 milliseconds
21
const debouncedFunction = debounce(myFunction, 1000);
22
23
// Call debounced function
24
// myFunction will be invoked after 1000 milliseconds
25
debouncedFunction();

Function debounced

Explanation:

1. The 'debounce' function takes two parameters: 'func', the function to debounce, and 'delay', the delay in milliseconds.

2. It returns a new function ('debounced') that will execute the original function ('func') after the specified 'delay'.

3. When the 'debounced' function is called, it clears any existing timeout and sets a new timeout to execute the original function after the specified delay.

You can adjust the 'delay' parameter to control how long the function should wait before executing the debounced version.