JavaScript debounce function to limit how often a function runs

JavaScript Dasun Kalupahana October 14, 2026 134 views

function debounce(fn, delay = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

const onSearch = debounce((e) => console.log(e.target.value), 400);
document.querySelector('#search')?.addEventListener('input', onSearch);

Delays a function until the user stops triggering it for a set time. Use it for search boxes, window resize and autosave so you don’t fire on every keystroke.

#javascript #debounce #performance #search-input #events