Ask anything about this post!
Before learning anything, we should always ask ourselves:
Why do I need to learn this? What problem does it solve?
So first, let’s understand the problem.
When users interact with a website, some events fire too frequently, such as:
Typing in a search box Resizing the browser window Scrollin Clicking buttons repeatedly
If we handle every single event, it can:
Slow down the application Overload APIs Cause performance issues
Debouncing helps us solve this problem.
Debouncing is a technique that delays the execution of a function until a certain amount of time has passed after the last event occurs.
“Wait for the user to stop doing something, then run the function.”
Imagine a doorbell:
Someone keeps pressing it repeatedly You don’t want the bell to ring every time
Instead:
You wait If no one presses the bell for 2 seconds, it rings once
That is debouncing.
There is a little girl who wants a Dairy Milk chocolate.
Her mom says, “If you don’t disturb me for 5 minutes, I will give you Dairy Milk. But if you interrupt me, I will start counting the time again from 0. Then you will have to wait for the next 5 minutes.”
The little girl is very excited. She waits for 1 minute and then says, “Mom, Mom, give me Dairy Milk.”
She breaks the rule.
Her mom says, “Now you have to wait for the next 5 minutes. The timer starts again from 0.”
The little girl waits again. This time, she waits for 3 minutes and then says, “Mom, Mom, give me Dairy Milk.”
Again, she breaks the rule.
Her mom says, “Now you have to wait for the next 5 minutes. The timer starts again from 0.”
Now the little girl finally understands. She thinks, “Okay, I have to wait for 5 full minutes without disturbing my mom. Only then will I get the Dairy Milk.”
This time, she waits for 5 minutes without interrupting.
After 5 minutes, her mom gives her the Dairy Milk.
The little girl is very happy 😊
input.addEventListener("keyup", () => {
fetchResults(); // called on every key press 😐
});
Typing “hello” triggers 5 API calls not good
function debounce(fn, delay) {
let timerId;
return function (...args) {
clearTimeout(timerId);
timerId = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
const handleSearch = debounce(() => {
console.log("API Call");
}, 500);
input.addEventListener("keyup", handleSearch);
The API is called only after the user stops typing for 500ms.
User triggers an event Timer starts If the event happens again → the old timer is cleared A new timer starts The function executes only once, after the delay
Use debouncing for:
Search suggestions Form validation Auto-save features API calls on user input
“Debouncing ensures a function runs only after a specified delay once the triggering events stop.”
Debouncing is a simple but powerful optimization technique in JavaScript that:
Improves performance Reduces unnecessary function calls Enhances user experience
If you’re building real-world frontend applications, debouncing is a must-know concept.
happy coding
Thank you for reading our blog!
We have a Discord community where you can ask questions and get help from the community.
No comments yet. Be the first to share your thoughts!