JavaScript Debounce & Throttle

What is Debounce?

Debounce delays a function call until after a specified delay has passed with no further calls. If new events keep firing, the timer resets.

Analogy: an elevator door that waits for the last person to step in before closing. Every new passenger resets the timer.

Use for:

• Search input (only fetch after user stops typing)
• Form validation on typing
• Autosave while editing
• Window resize handlers

What is Throttle?

Throttle limits a function to run at most once every N milliseconds, no matter how many times the event fires. Continuous events produce steady, predictable calls.

Analogy: a machine gun with a maximum rate of fire. You can hold the trigger, but bullets only come out at the defined rate.

Use for:

• Scroll progress indicators
• Mouse move tracking
• Infinite scroll triggers
• Rate-limiting API calls

The Debounce Function

Here is a clean, dependency-free implementation:

function debounce(fn, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => fn.apply(this, args), delay);
    };
}

// Usage
const handleSearch = debounce((query) => {
    console.log("Searching for:", query);
}, 500);

document.querySelector("#search").addEventListener("input", (e) => {
    handleSearch(e.target.value);
});

Every keystroke clears the previous timer and starts a new one. Only after 500ms of silence does the function actually run.

The Throttle Function

Here's a version that fires on both leading and trailing edges:

function throttle(fn, delay) {
    let lastCall = 0;
    let timeoutId;

    return function(...args) {
        const now = Date.now();
        const remaining = delay - (now - lastCall);

        if (remaining <= 0) {
            if (timeoutId) {
                clearTimeout(timeoutId);
                timeoutId = null;
            }
            lastCall = now;
            fn.apply(this, args);
        } else if (!timeoutId) {
            timeoutId = setTimeout(() => {
                lastCall = Date.now();
                timeoutId = null;
                fn.apply(this, args);
            }, remaining);
        }
    };
}

// Usage
const handleScroll = throttle(() => {
    console.log("Scroll position:", window.scrollY);
}, 200);

window.addEventListener("scroll", handleScroll);

This ensures the function runs immediately on the first event, then at most every 200ms, and always fires one last time after events stop.

Real-World Example: Search Autocomplete

import { useState, useEffect } from "react";

function SearchBox() {
    const [query, setQuery] = useState("");
    const [results, setResults] = useState([]);

    useEffect(() => {
        if (!query) return;

        const controller = new AbortController();

        const timeoutId = setTimeout(() => {
            fetch(`/api/search?q=${query}`, { signal: controller.signal })
                .then(res => res.json())
                .then(setResults)
                .catch(err => {
                    if (err.name !== "AbortError") console.error(err);
                });
        }, 500);

        return () => {
            clearTimeout(timeoutId);
            controller.abort();
        };
    }, [query]);

    return (
        <div>
            <input
                value={query}
                onChange={e => setQuery(e.target.value)}
                placeholder="Search..."
            />
            <ul>
                {results.map(r => <li key={r.id}>{r.title}</li>)}
            </ul>
        </div>
    );
}

This combines debounce (via setTimeout) with AbortController to cancel in-flight requests. The result: one clean API call after the user stops typing.

👉 Read our AbortController Guide.