Debounce vs Throttle in JavaScript — What's the Difference?

Debounce and throttle both limit how often a function runs in response to rapid events, but with different behavior: debounce waits until the events stop for a set period before running the function once; throttle runs the function at most once per fixed interval regardless of how many events occur.

Common causes

• Rapid-fire events like scroll, resize, mousemove, or keystroke input can trigger expensive work (API calls, re-renders) far more often than needed

How to fix it

• Use debounce for search-as-you-type inputs — wait until the user stops typing before firing the API request
• Use throttle for scroll or resize handlers — you want periodic updates during continuous activity, not just at the end
• Both can be implemented from scratch with setTimeout/clearTimeout, or pulled from a utility library like lodash (_.debounce, _.throttle)

Example

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

FAQ

Which one should I use for a search box?

Debounce — you only want to fire the search request after the user pauses typing, not on every keystroke.