Back to all snippets
Library/JavaScript/Debounce Function
javascriptintermediateperformanceoptimizationtiming

How to implement Debounce Function in Javascript

Delay function execution until after a specified time has elapsed since the last invocation

Quick Answer

A debounce function delays execution of a callback until a set amount of time has passed since its last call. It is ideal for search inputs, resize handlers, and any scenario where you want to wait for user activity to pause before acting.

Code Snippet

1function debounce(func, wait) {
2  let timeout;
3  return function executedFunction(...args) {
4    const later = () => {
5      clearTimeout(timeout);
6      func(...args);
7    };
8    clearTimeout(timeout);
9    timeout = setTimeout(later, wait);
10  };
11}

What is Debounce Function?

A debounce function is a higher-order function that delays the execution of a callback until a certain amount of time has passed without it being called again. This is particularly useful for optimizing performance in scenarios where you want to limit how often a function runs, such as handling search inputs, window resize events, or scroll listeners.

How It Works

  1. 1The function accepts a callback and a wait time in milliseconds.
  2. 2Each time the returned wrapper is called, any pending timeout is cleared.
  3. 3A new timeout is scheduled to call the original function after the wait period.
  4. 4If the wrapper is called again before the timeout fires, the clock resets.
  5. 5The callback only executes once the wrapper has not been called for the full wait duration.

Common Use Cases

  • Search input fields — wait for the user to stop typing before making API calls
  • Window resize events — prevent excessive calculations during resizing
  • Form validation — validate input after the user finishes typing
  • Auto-save functionality — save data after the user stops editing

Key Benefits

  • Reduces API calls and improves application performance
  • Prevents excessive function executions
  • Improves user experience by reducing lag
  • Saves bandwidth and server resources

Common Mistakes to Avoid

  • Forgetting to clear the previous timeout, causing multiple executions.
  • Using too short a wait time, which defeats the purpose of debouncing.
  • Creating a new debounced function on every render inside React components — move it outside or use useCallback.
  • Confusing debounce with throttle: debounce waits for activity to stop, throttle fires at regular intervals.

Quick Tips

  • Click the "Copy" button above to copy the code to your clipboard
  • This code is production-ready and can be used in your projects immediately
  • Check out related snippets below for more javascript examples

Frequently Asked Questions

What is the difference between debounce and throttle in JavaScript?

Debounce delays execution until activity stops for a set time. Throttle ensures the function runs at most once per interval, regardless of how many times it is called.

What wait time should I use for a search input debounce?

200–400 ms is a common range. 300 ms is a good default — short enough to feel responsive, long enough to avoid firing on every keystroke.

Can I use debounce in React?

Yes. Wrap the function in useCallback with an empty dependency array so a new debounced function is not created on every render.

Related Snippets

javascript
intermediate
Throttle Function
Limit function execution to once per specified time interval
performanceoptimizationtiming
javascript
beginner
Sleep Function
Pause execution for a specified number of milliseconds using async/await
asyncutilitiestiming

About This Javascript Code Snippet

This free javascript code snippet for debounce function is production-ready and copy-paste friendly. Whether you are building a web app, API, or frontend interface, this intermediate-level example will help you implement debounce function quickly and correctly.

All snippets in the Snippetly library follow javascript best practices and are tested for real-world use. You can adapt this code to work with React, Vue, Node.js, or any project that uses javascript.

Tags: performance, optimization, timing  | Language: javascript  | Difficulty: intermediate  | Category: JavaScript

Build Your Own Snippet Library

Organise your team's code snippets with Snippetly. Share knowledge and boost productivity across your organisation.

Get Started FreeBrowse More Snippets