Blog/NotesConcept

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.

beginner

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 👇👇

Table of Content

  1. Debouncing in JavaScript
  2. Debouncing use-case examples

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

debouncing in javascript example - FrontendGeek

 

⏩Next, Read

Best Resources to understand throttling & debouncing 

 


Share this post now:

Advertisement

💬 Comments (0)

Login to comment

Advertisement

Flaunt You Expertise/Knowledge & Help your Peers

Sharing your knowledge will strengthen your expertise on topic. Consider writing a quick Blog/Notes to help frontend folks to ace Frontend Interviews.

Advertisement


Other Related Blogs

Master Hoisting in JavaScript with 5 Examples

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.

Best Cheat Sheet for Frontend Machine Coding Interview Round

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.

HTTP/2 vs HTTP/1.1: What's the Key Difference?

Anuj Sharma

Last Updated Jan 29, 2025

Understand the difference between HTTP/2 vs HTTP/1.1 based on the various parameters, which helps to understand the improvement areas of HTTP/2 over HTTP 1.1

Part 1: From Zero to Published — How I Built and Published My First React NPM Package

Akash Deep Chitransh

Last Updated May 26, 2025

Learn how to build and publish your own NPM package with Rollup, testing, and troubleshooting. Stay tuned for part 2: building a React state management library!

Understand JavaScript Date Object with Examples (for JavaScript Interviews)

Anuj Sharma

Last Updated Jan 9, 2025

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.

Promise.all Polyfill in JavaScript - Detailed Explanation [For Interviews]

Anuj Sharma

Last Updated Jan 16, 2025

Deep dive into promise.all polyfill in javascript will help to understand the working of parallel promise calls using Promise.all and its implementation to handle parallel async API calls.

FrontendGeek
FrontendGeek

© 2024 FrontendGeek. All rights reserved