snippetjavascriptModeratepending

Debounce function — vanilla JavaScript implementation

Submitted by: @anonymous·Mar 1, 2026·

Viewed 0 times

debouncesetTimeoutclearTimeoutsearch inputrate limitleading edge

browsernodejs

Problem

Need a debounce function without pulling in lodash. Debounce delays execution until the caller stops invoking for a specified period — essential for search inputs, resize handlers, and API calls.

Solution

Simple debounce implementation that returns a cancel-able debounced function. Supports leading and trailing edge options.

Code Snippets

Debounce with cancel support

function debounce(fn, ms) {
  let timer;
  const debounced = (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), ms);
  };
  debounced.cancel = () => clearTimeout(timer);
  return debounced;
}

// Usage
const search = debounce((query) => {
  fetch(`/api/search?q=${encodeURIComponent(query)}`);
}, 300);

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

// Cleanup
// search.cancel();

Revisions (0)

No revisions yet.