Understand the concept of Debouncing in JavaScript to improve the performance of your web application and optimize the event handling in JavaScript, by limiting API calls or DOM events.
Anuj Sharma
Last Updated Jan 20, 2025
Debounce in JavaScript is a very effective technique to improve web performance, especially for applications with higher user interaction. This is also very useful for saving the network bandwidth by delaying the API calls and invoking when user interaction gets paused for a certain interval. Let's understand 👇👇
Debouncing in javascript is a technique to delay the function call for a certain interval to improve the overall performance of the web application and also limit the javascript thread utilization by not calling the function on each event.
The debouncing technique is primarily very helpful in cases where there is an expensive job (for example API call, or drag the element) associated with the user action, debouncing helps rather than calling the function each time, it calls after a given interval when the user pauses the intersection (means event doesn't happen for that interval).
The debounce function returns a closure function and associated timer to track the input delay. The closure function gets the context and arguments of the invoker function that will be going to be used to call the callback function.
In the debounce function every time the previous timer got cleared out whenever a call happened, a new timer got initialized with the given input delay which ensures that if there is a gap/pause in the function call the callback function got invoked. Debounce doesn't invoke the function until there is a gap/pause equal to the input delay.
// 👇👇 Debounce implementation
const debounce = function (callback, delay) {
let timer;
// It returns a new function (closure, can access timer)
return function () {
const context = this;
const args = arguments;
// Clearing previous timeout
clearTimeout(timer);
// Setting new timeout
timer = setTimeout(() => {
callback.apply(context, args);
}, delay);
};
};E-commerce product search is the most common use-case of using the debounce function. As debounce delayed the function call for a defined interval, when the user starts searching for the product the API call happens when the user gives a break in the typing means the API call to the server which was bound to the keypress event rather than calling on each key press, it only calls when the user gives the defined gap in below example that gap is 1000ms (1sec).
Search box
// index.html
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<script src="src/debounce.js"></script>
</head>
<body>
<label>Search box</label>
<input id="search-box" type="search" />
</body>
</html>Debounce on the search box
// debounce.js
let counter = 0;
let debouncedCounter = 0;
function apiCall() {
counter++;
console.log("API call", counter);
}
// Debounded function
function apiCallDebounced() {
debouncedCounter++;
console.log("⚡Debounced API call", debouncedCounter);
}
const debouncedFunction = debounce(apiCallDebounced, 1000);
const searchBox = document.getElementById("search-box");
searchBox.addEventListener("keypress", apiCall);
searchBox.addEventListener("keypress", debouncedFunction);Output
Best Resources to understand throttling & debouncing
A seasoned Sr. Engineering Manager at GoDaddy (Ex-Dell) with over 12+ years of experience in the frontend technologies. A frontend tech enthusiast passionate building SaaS application to solve problem. Know more about me 🚀
Be the first to share your thoughts!
No comments yet.
Start the conversation!
Build Your Portfolio
Help the Community
Strengthen Your Skills
Share your knowledge by writing a blog or quick notes. Your contribution can help thousands of frontend developers ace their interviews and grow their careers! 🚀
Anuj Sharma
Last Updated Feb 21, 2026
Find the step-by-step explanation of the useFetch custom hook in React that helps in fetching the data from an API and handling loading, error states.
Anuj Sharma
Last Updated Aug 3, 2025
Explore the implementation of setTimeout in JavaScript with a detailed explanation for every step. Understand all scenarios expected to implement the setTimeout polyfill.
Anuj Sharma
Last Updated Nov 15, 2025
Understand the code implementation of useSessionStorage custom hook in react that will help to efficiently manager session storage in application.
Anuj Sharma
Last Updated Feb 21, 2026
Find the top React Performance Optimization Techniques specific to React applications that help to make your react app faster and more responsive for the users along with some bonus techniques.
Anuj Sharma
Last Updated Feb 21, 2026
Explore code explanation of useToggle() custom hook in react to handle the toggle event efficiently.
Anuj Sharma
Last Updated Dec 17, 2025
A comprehensive collection of the most asked Frontend System Design Interview Questions for Experienced along with the related Answers, Patterns and Important Resources.
Subscribe to FrontendGeek Hub for frontend interview preparation, interview experiences, curated resources and roadmaps.
All in One Preparation Hub to Ace Frontend Interviews. Master JavaScript, React, System Design, and more with curated resources.
© 2026 FrontendGeek. All rights reserved