Understand Debouncing in JavaScript with Examples
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 Jun 27, 2026
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 👇👇
Table of Content
Debouncing in JavaScript
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).
Debouncing Implementation in JavaScript
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);
};
};Debouncing Use-Case Examples
Debouncing in API call on Search
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
Further Reading
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 🚀
Learn Next
Comments
Be the first to share your thoughts!
No comments yet.
Start the conversation!
Share your expertise
Publish a blog or quick notes on topics you know well — your write-up could be the answer someone needs before their next frontend interview.
Build your portfolio
Help the community
Sharpen your skills
Earn goodies
Other Related Blogs
What is Throttling in JavaScript - Implementation & Examples
Anuj Sharma
Last Updated Jun 4, 2026
Understand the concept of throttling in JavaScript to improve the performance of your web application and optimize the event handling in JavaScript, by limiting API calls or DOM events.
How to convert HEX to RGB in JavaScript
Anuj Sharma
Last Updated Jul 6, 2026
A quick way to convert HEX to RGB in JavaScript that will help to do the CSS HEX to RGB color conversion programmatically.
How to convert RGB to HEX in JavaScript
Anuj Sharma
Last Updated Jul 6, 2026
A quick way to convert RGB to HEX in JavaScript that will help to do the CSS RGB to HEX color conversion programmatically
Implement JSON Parse polyfill in JavaScript
Anuj Sharma
Last Updated Jun 15, 2026
Explore the code implementation of JSON Parse Polyfill in JavaScript that can parse a string into valid JSON.
Implement JSON Stringify Polyfill in JavaScript
Anuj Sharma
Last Updated Jun 15, 2026
Explore the detailed explanation of the JSON Stringify Polyfill implementation in JavaScript to prepare for the frontend interviews.
What is javascript:void(0) and How it Works?
Anuj Sharma
Last Updated Jun 15, 2026
A comprehensive explanation about using javascript:void(0) in javascript. When to use javascript:void(0) and how it works with examples of using it with anchor tag.
Understand JavaScript Date Object with Examples (for JavaScript Interviews)
Anuj Sharma
Last Updated Jun 15, 2026
Go through different ways to display dates using javascript date object. It covers examples of date object usage to understand the main concepts of javascript date object.
Apply Polyfill in JavaScript: Step by Step Explanation (For Interview)
Anuj Sharma
Last Updated Jun 15, 2026
Understand how the apply method works in JavaScript and cover step by step-by-step explanation of the apply method polyfill in JavaScript to understand its internal implementation.
