JavaScript

JavaScript Debounce Utility

JavaScript

Wrap any function and ensure it only fires once the user has finished typing or scrolling. Ideal for keyword search inputs, JSON tools, or anything that hits an API on every keystroke.

Usage notes

Paste this into a shared utilities file or small ES module and use it anywhere noisy events would otherwise hammer your API.

const handleInput = debounce((value) => {
  // Call your API / update UI
}, 300);

input.addEventListener('input', (e) => handleInput(e.target.value));

300–400ms usually feels natural for search; heavier operations can go higher.

Copy this snippet into your project

Use the full version for learning, or copy it without comments when you just want the bare code.

export function debounce(fn, delay = 250) {
  let timer = null;

  return function debounced(...args) {
    window.clearTimeout(timer);
    timer = window.setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

// Usage:
// const onInput = debounce((value) => doSearch(value), 300);

Usage notes

Tags

Cookie preferences