Debouncing in JavaScript

Debouncing in General term

Debouncing is a technique in programming that helps prevent time-consuming tasks from being triggered so frequently that they slow down the performance of a web page. In simpler terms, it controls how often a function is called.

What is Debouncing in JavaScript? 🤔

In JavaScript, debouncing is commonly used to enhance browser performance. Sometimes, certain actions on a web page involve complex computations that take up time. If these actions are triggered too frequently, it can significantly impact the browser's performance, especially since JavaScript operates on a single thread.

For Example: Suppose we have a Search Input on the main page of a website that shows suggestions as the user types. Let's call a function to fetch suggestions on every keystroke. We might end up making too many requests to the backend server, which can slow down the application, waste resources, and, more importantly, affect User Experience. Instead, we can use debouncing to wait until the user has stopped typing for a while before making the request.

How to implement debouncing in JavaScript? 😮

The most common way to implement debouncing in JavaScript is to use a wrapper function that returns a new function that delays the execution of the original function.

Debouncing accepts a function and transforms it in to an updated (debounced) function so that the code inside the original function is executed after a certain period of time. If the debounced function is called again within that period, the previous timer is reset and a new timer is started for this function call. The process repeats for each function call.

Suppose we have a function getData() that needs to execute after say's 300ms

Let's implement a debounce wrapper

1. Create a index.js file

How to use debounce function to use with original getData() function

Debounce Implementation using a Custom Hook

The advantage of custom hooks is that you can reuse the same logic throughout your application. It is highly advisable to do so.

Usage of debounce in hook with the above example

In the above example:, we have type laptop as the input keyword, it has 6 words so 6 times onChange Event is triggered but using the debounce technique we delay this function call after the user has finished typing or delay between 2 key press is greater than delay timer pass in debounce function.

Use Case of Debouncing/Real-life examples of Debouncing

1. Google Search: Auto-complete functionality.
2. Elevator: When you press the button to call the elevator, it doesn’t move immediately, but waits for a few seconds to see if anyone else wants to get on or off. This way, it avoids going up and down too frequently and saves energy and time.

Conclusion

Debouncing is a useful technique to optimize web applications by reducing unnecessary or repeated function calls that might affect the performance or user experience. Debouncing uses the important concept of closures.

I hope you found this blog helpful and learned something new about Debouncing in JavaScript.

KeepLearning, Happy_Coding

Thanks for Reading 😀🤩