Debounce vs Throttle: Practical Guide for High-Frequency Events

Core Difference

Debounce means "wait until the user stops then execute"; throttle means "execute at a fixed rhythm regardless of how fast events fire".

Visual Comparison

User continuous triggers (each cell = one event, ● = actual execution)

Debounce debounce (execute after 300ms pause):
|—|—|—|—|——pause——|·●·
↑ Only executes after the final silent period ends

Throttle throttle (max once per 300ms):
|●—|—|—|●—|—|—|●—|—|—|●
↑ Fixed-rate sampling, evenly discards excess events during dense bursts

Dimension Comparison

Execution timing : Debounce – after stop N ms; Throttle – at fixed intervals.

Focus : Debounce – only the last event; Throttle – guarantee steady processing.

Typical scenarios : Debounce – search suggestions, form validation; Throttle – scroll loading, drag.

Typical feel : Debounce – "request after you finish typing"; Throttle – "animation/progress updates smoothly".

Debounce Implementations

1. Basic Version

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

2. Immediate-Execute Version (first call fires instantly, then ignores during quiet period)

function debounceImmediate(fn, delay = 300) {
  let timer = null
  return function (...args) {
    const callNow = !timer
    clearTimeout(timer)
    timer = setTimeout(() => { timer = null }, delay)
    if (callNow) fn.apply(this, args)
  }
}

3. With Cancel Capability (cleanup on component unmount)

function debounce(fn, delay = 300) {
  let timer = null
  const debounced = function (...args) {
    clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, args), delay)
  }
  debounced.cancel = () => {
    clearTimeout(timer)
    timer = null
  }
  return debounced
}

Pitfall : The timer must live in the closure outside the returned function; if placed inside, each invocation creates a new timer and debounce fails completely.

Throttle Implementations

1. Timestamp Version (immediate first execution, no trailing call after stop)

function throttle(fn, wait = 300) {
  let last = 0
  return function (...args) {
    const now = Date.now()
    if (now - last >= wait) {
      last = now
      fn.apply(this, args)
    }
  }
}

2. Timer Version (delayed first execution, guarantees trailing call after stop)

function throttle(fn, wait = 300) {
  let timer = null
  let lastArgs = null
  return function (...args) {
    lastArgs = args
    if (timer) return
    timer = setTimeout(() => {
      fn.apply(this, lastArgs)
      timer = null
    }, wait)
  }
}

Comparison

Timestamp : first call immediate, no trailing call – suitable for button double-click prevention.

Timer : first call delayed, trailing call yes – suitable for scroll loading.

Pitfall : For "load more on scroll to bottom", timestamp version may drop the final trigger if the user stops exactly in the gap; use timer version or the scrollend event as fallback.

Scenario Selection

Search suggestions – Debounce (immediate version optional)

Real-time form validation – Debounce

Button duplicate submit prevention – Debounce or simply disable button

Scroll load more – Throttle

Back-to-top button visibility – Throttle

Resize layout recalculation – Debounce

Mousemove drawing/following – Throttle

Map drag tile loading – Throttle

Vue 3 Integration

1. Using VueUse (recommended)

import { useDebounceFn, useThrottleFn, watchDebounced } from '@vueuse/core'

const doSearch = useDebounceFn((kw) => {
  fetchSuggestions(kw)
}, 300)

const onScroll = useThrottleFn(() => {
  if (isNearBottom()) loadMore()
}, 200)

watchDebounced(keyword, () => validate(keyword.value), { debounce: 500 })

2. Custom Composable (no extra dependency)

import { onUnmounted } from 'vue'

export function useDebounce(fn, delay = 300) {
  let timer = null
  const run = (...args) => {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => fn(...args), delay)
  }
  run.cancel = () => {
    if (timer) clearTimeout(timer)
    timer = null
  }
  onUnmounted(() => run.cancel())
  return run
}

Pitfall : Always cancel timers in onUnmounted; otherwise callbacks may access unmounted component state causing errors or memory leaks.

3. Button Duplicate Submit – Correct Pattern

Debounce is only a helper; the real guard is a loading state plus button disable:

const submitting = ref(false)

async function onSubmit() {
  if (submitting.value) return
  submitting.value = true
  try {
    await saveOrder(form)
    ElMessage.success('Submitted')
  } finally {
    submitting.value = false
  }
}

Quick Reference

Execute after input stops N ms – Debounce: clearTimeout + setTimeout First call immediate – Debounce immediate version (callNow flag)

Fixed-rate execution – Throttle: timestamp diff check

Trailing call after stop – Throttle timer version

Vue shortcut – useDebounceFn / useThrottleFn / watchDebounced Cleanup on unmount – cancel function + onUnmounted Prevent duplicate submit – Loading state disable button (debounce only assists)

Conclusion

Debounce and throttle handle "event-layer" frequency reduction, the most fundamental and frequent front-end performance technique. Choose wrong and you either fire a flood of requests or make smooth animations stutter. Remember the mantra: debounce owns the "final one", throttle owns "steady pace".