Debouncing

Index

1. what is debouncing?

2. Implementation of debounce.

3. When Should We Use Debouncing?

What is debouncing ?

Debouncing is a programming pattern used to ensure that a function is only executed once after a certain amount of time has passed since it was last invoked. In simple terms, it is used to improve performance of feature by controlling time at which a function should executed.

Debounce accepts a function & transform it into an updated function so that the code inside the original function is executed after a certain period of time. If the debounce function is called within that period of time the previous timer is reset & new timer is started for the function call. The process repeats for each function call.

Implementation

To implement we need Two things,

• Delay the function Execution

• Reset the timer if function is called again

To debounce we need to have a separate function that acepts function reference and delay as parameter and return a debounced function.

Ex. we have a input box and as we type we should get the suggestion, for this we will use onkeyup Event which will do an Api call.

<input type='text' onkeyup="getApiData()" />

let counter=0;
const getApiData = () => {
   console.log('Api data', counter++)
}
//counter variable is just to differentiate as you type each key.

If you type 5times then our Api would have called 5times, but in reality we want to call API only when I pause typing, to solve this problem of gettingApi method again and again, we should come with better solution. We will create a debounce function, which will do some improvement into getApiData() & don't call again and again on every key stroke rather only call when user is pause typing. Suppose, I take ex. of 300ms, so if only the difference of time between two key process is greater than 300ms call getApiData method.

const deounce = function (func,delay){
    let timer;
    return function (){
        let context = this,
            args = argument;
            clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(context,args)
    }, delay)
    }
}

const callDebounce = debounce(getApiData,300)

<input type='text' onkeyup='callDebounce' />

When Should We Use Debouncing?

Debouncing is especially useful in scenarios where you want to reduce the frequency of function execution in response to high-frequency events. Some common use cases include:

1. Search Input: When a user is typing in a search box, you might want to wait until they finish typing before sending an API request to fetch results.

2. Window Resize Event: To prevent multiple calculations or re-rendering during a window resize, you can debounce the resize event handler.

3. Scroll Event: On a scroll, you might want to trigger a function, but running it on every pixel scrolled can be resource-intensive. Debouncing helps optimize this behavior.

4. Form Validations: When performing live validations, you may want to debounce the validation logic to avoid overwhelming the system with too many checks as the user types.

Conclusion

Debouncing is a powerful technique for optimizing performance in JavaScript applications. By controlling how often a function is executed in response to high-frequency events, you can significantly reduce the strain on your application and improve the overall user experience. Whether it's handling search inputs, scroll events, or window resizing, debouncing is an essential tool in your JavaScript toolkit.