Debounce vs throttle

Debounce

Debouncing forces a function to wait a certain amount of time before running again. This time also acts as a cooldown and for example when spam calling a debounced function, the cooldown will never reset and the function is never called. Only when the time between two function calls is more than the predefined cooldown value, the function is called.

TypeScript implementation:

type Procedure = (...args: any[]) => void

export function debounce<F extends Procedure>(
  func: F,
  wait = 300,
  immediate = true,
): (this: ThisParameterType<F>, ...args: Parameters<F>) => void {
  let timeout: ReturnType<typeof setTimeout> | undefined | null

  return function (this: ThisParameterType<F>, ...args: Parameters<F>) {
    const context = this
    const callNow = immediate && !timeout

    if (timeout) clearTimeout(timeout)

    timeout = setTimeout(() => {
      if (timeout) timeout = null

      if (!immediate) func.apply(context, args)
    }, wait)

    if (callNow) func.apply(context, args)
  }
}

Some common use cases

• Search input - Often times we want to use the user input to search or find something from a database or from some 3rd party API - this will help to prevent spamming your API's.
• Resize/Scroll/Mousemove listeners - Having listeners on either scroll or resize events might invoke a function way too often. For example if you want to do some height or width calculations based on window size, it probably would be a lot more performant do limit the frequency.

Keep in mind that your function will be executed after the user has finished or stopped to do these actions (scrolling/resizing/moving/typing). Because during these actions the cooldown period is most likely never passed.

Example

Here we have a search input where the handleChange() function will be called when the cooldown period of 300ms is passed

Without debouncing:

React code example:

const SearchInput = () => {
  const [value, setValue] = useState('')

  const handleChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
    setValue(target.value)
  }

  const handleDebouncedOnChange = useMemo(() => {
    return debounce(handleChange, 300, false)
  }, [])

  return (
    <>
      <label>
        Debounced search:
        <input onChange={handleDebouncedOnChange} />
        <div>{value}</div>
      </label>
    </>
  )
}

Throttle

To throttle a function means to ensure that the function is called at most once in a specified time period (for instance, once every 2 seconds). Throttling also ensures a function is run regularly at a fixed rate.

TypeScript implementation:

type Procedure = (...args: never[]) => void

export function throttle<F extends Procedure>(
  func: F,
  wait = 300,
): (this: ThisParameterType<F>, ...args: Parameters<F>) => void {
  let lastTime = 0

  return function (this: ThisParameterType<F>, ...args: Parameters<F>) {
    const context = this
    const now = Date.now()
    if (now - lastTime >= wait) {
      func.apply(context, args)
      lastTime = now
    }
  }
}

Some common use cases

• Games - Let's say we have shooting game where a particular weapon shoots at most 1 bullet in every second. Although the user might spam the SHOOT button, throttling will help to call the shootWeapon() at most every 1s.
• Event listeners - If you want to do a consistent action on resize, scroll, mousemove or other similar events.
• Button clicks
• API calls

Example

Here we have an example, where handleClick() function is called at most every 1s

Without throttling:

React code example:

const ClickCounter = () => {
  const [clickCounter, setClickCounter] = useState(0)

  const handleClick = () => {
    setClickCounter((prevState) => prevState + 1)
  }

  const handleThrottledClick = useMemo(() => {
    return throttle(handleClick, 1000)
  }, [setClickCounter])

  return (
    <div>
      <button onClick={handleThrottledClick}>Click me</button>

      <div>Click counter: {clickCounter}</div>
    </div>
  )
}

Conclusion

Hopefully this post will help to eliminate any confusion of what are the debounce and throttle methods and what are the differences between them.