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
Advertisement
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
Advertisement
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 Jun 13, 2025
A comprehensive cheat sheet for the Frontend Machine Coding Interview Round, which helps to revise all the important machine coding & UI design concepts before the interview.
Anuj Sharma
Last Updated Jun 27, 2025
A detailed list of 20+ most asked Frontend Machine Coding Interview Questions and resources both in JavaScript & React. Also covers expected functional/Non-functional requirements in this Interview.
Anuj Sharma
Last Updated Aug 3, 2025
Understand what all steps are involved in the Critical Rendering Path (CRP) and how optimization of different steps can improve the overall web-vitals of a web application
Anuj Sharma
Last Updated Aug 3, 2025
Understand the implementation of the clearTimeout polyfill in JavaScript with a detailed explanation of each and every step.
© 2024 FrontendGeek. All rights reserved
