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
Advertisement
Advertisement
Vijay Sai Krishna vsuri
Last Updated Aug 21, 2025
A Quick guide about popstate event in JavaScript, If you’ve ever hit the back button in your browser and wondered how your Single-Page Application knows which view to render, this guide is for you.
Anuj Sharma
Last Updated Oct 2, 2025
Explore Polyfill for map, filter and reduce array methods in JavaScript. A detailed explanation of Map, filter and reduce polyfills in JS helps you to know the internal working of these array methods.
Alok Kumar Giri
Last Updated Jun 2, 2025
Code snippet examples which will help to grasp the concept of Hoisting in JavaScript, with solutions to understand how it works behind the scene.
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 Oct 13, 2025
Understand the step-by-step implementation of Infinite Currying Multiplication in JavaScript with a code example.
Frontendgeek
Last Updated Sep 25, 2025
Understand the JWT(JSON Web Token) and how JWT decode works. It also covers how the end-to-end JWT authentication works between client & server, along with the pros and cons of using JWT.
Subscribe to FrontendGeek Hub for the frontend interview preparation, interview experiences, curated resources and roadmaps.
© 2024 FrontendGeek. All rights reserved
