Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/javascript/debouncing-in-javascript/ below:

Debouncing in JavaScript - GeeksforGeeks

Last Updated : 11 Jul, 2025

In JavaScript, debouncing is a technique used to ensure that a function is not called too frequently. It is commonly used in scenarios where events are triggered rapidly, such as typing in an input field or resizing a window. Without debouncing, functions might be executed many times in quick succession, causing performance issues or unwanted behaviour.

Debouncing in JavaScript can be defined as the technique that is used to limit the number of times a function gets executed. Debouncing is useful when the event is frequently being triggered in a short interval of time like typing, scrolling, and resizing.

• Limit Function Calls: During frequent events like typing, resizing, or scrolling debouncing prevents the frequent function calls.
• Delays Execution: After the specific delay only the function is executed, ensuring no rapid consecutive calls.
• Prevents Overload: Efficiently managing high-frequency triggers helps in preventing overloading.

// Debounce function
function debounce(func, delay) {
    let timeout;
    return function (...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

// Function to be debounced
function search(query) {
    console.log('Searching for:', query);
}

// Create a debounced version of the search function
const dSearch = debounce(search, 100);

// Simulate typing with multiple calls to the debounced function
dSearch('Hello');
dSearch('Hello, ');
dSearch('Hello, World!');  // Only this call will trigger after 100ms

Searching for: Hello, World!

In this example

• debounce() function: It is the higher order function that takes (delay) and function(func) as the arguments. It returns a new function that will wait for the specified delay before calling the original function.
• clearTimeout(): It is used to clear any previous set timeout so that if the event is triggered repeatedly the function call does not happen too quickly.
• setTimeout(): This method is used to set the timeout after clearing the previous timeouts.
• Search function: It is the placeholder for the function we want to debounce.

In JavaScript the debouncing function works when the event is being triggered. The Debounce wait for the specific period to run the function, it doesn't run the function immediately. If before the wait time is over, the event is triggered again then the previous function call is canceled and it resets the timer. Once the timer completes without any further event triggers, the function is executed. This ensures that the function is executed only after the event stops occurring for a specific period.

The use cases of the debouncing in javaScript are mentioned below:

• Search Input Field: In the search bar, the user types characters one after another due to which for each key press an API request is triggered. Debouncing makes sure that the API request is only sent when the user has finished typing.

let timer;
document.getElementById("searchInput").addEventListener("input", () => {
    clearTimeout(timer);
    timer = setTimeout(() => console.log("Searching..."), 300);
});

• Window Resizing: When we resize the window browser, in a short interval of time the resize event gets fired multiple times. Debouncing can be used in handling this event.

let timer;
window.addEventListener("resize", () => {
    clearTimeout(timer);
    timer = setTimeout(() => console.log("Window resized"), 500);
});

• Scroll Events: When the user scrolls the webpage the scroll event is triggered multiple times per second. By debouncing the event, the scroll handler function is executed only after the user has stopped scrolling for a specific duration.

let timer;
window.addEventListener("scroll", () => {
    clearTimeout(timer);
    timer = setTimeout(() => console.log("Scrolling stopped"), 300);
});

• Form Validation: If in real-time we are validating a form as the user types, debouncing can be used to ensure that for every keystroke the validation function is not repeatedly triggered.

let timer;
document.getElementById("formInput").addEventListener("input", () => {
    clearTimeout(timer);
    timer = setTimeout(() => console.log("Validating..."), 500);
});

• Improved Performance: Debouncing helps in optimizing the performance by reducing the number of times of function execution, especially when we are handling frequent events like type. This reduces unnecessary resource usage.
• Better User Experience: When the events are rapidly triggered then also the application remains responsive with debouncing.
• Prevents Redundant API Calls: Debouncing ensures that the API requests are only sent when the user stops interacting with the page for a specific time. This helps the server from crashing with repeated requests.

Debouncing and Throttling both are used for limiting the function calls during an event, but they both work in different ways:

• Debouncing: In Debouncing the function is called only when the event stops occurring for a specific time.
• Throttling: In throttling at regular intervals the function is called (every 100ms), even if the event has occurred multiple times during that duration.

Features

Debouncing

Throttling

Definition

Executes a function only after a specified delay with no further events during that time.

Executes a function at regular intervals, no matter how frequently the event occurs.

Execution Trigger

After the event stops firing for a set time.

At fixed intervals, regardless of the event frequency.

Delay/Interval

Delays the function call until the event stops.

Limits the function call to a specific interval, regardless of continuous events.

Function Calls

The function is called once after the event stops firing for a defined time.

The function is called every X milliseconds, even if the event triggers more frequently.

Example

Typing in a search box

Scroll event

We can use the debouncing in the following conditions:

• When we are dealing with operations like API calls then we can prevent unnecessary network requests to optimize the performance.
• We can prevent the lags or delays due to repeated function execution to improve the user experience.
• We can limit the function calls triggered by frequent user actions such as typing, and crolling.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4