When working with user events like scrolling, resizing, or typing in a search box, your functions might run too frequently, which can slow down your app.
That’s where Debouncing and Throttling come to the rescue!
In this blog, let’s break down both concepts with simple, real-life examples to help you understand when and how to use them.
What is Debouncing?
Debouncing is a technique where a function is delayed until a certain amount of time has passed since the last event. It's useful for events like typing, where you only want to react after the user has finished.
Real-Life Example of Debouncing
- When you type a product name in the search bar of an e-commerce site, it doesn’t make a request after every letter you type.
- Instead, it waits until you pause typing for a moment, and then shows suggestions.
- This helps reduce the number of unnecessary API calls and improves performance — a perfect use case for debouncing.
Use Cases of Debouncing
- Search Input: Reduce API calls while the user is typing.
- Auto-Suggestions / Autocomplete: Wait for the user to stop typing before fetching or showing suggestions.
- Resize Window: Prevent repeated function calls during continuous resizing.
- Real-Time Form Validation: Validate input fields after the user stops typing.
- Auto-Saving Drafts: Save the content after a short pause instead of on every keystroke.
- Scroll-Based Lazy Loading: Load more content after scrolling stops (less common but useful in some cases).
- Prevent Multiple Button Clicks: Avoid multiple submissions by debouncing click events.
Code Example: Debouncing in JavaScript