JavaScript Debounce & Throttle Interview Questions

Debounce — built from scratch

function debounce(fn, delay) {
  let timerId = null

  return function(...args) {
    // Cancel any pending execution
    clearTimeout(timerId)

    // Schedule a new one
    timerId = setTimeout(() => {
      fn.apply(this, args)
      timerId = null
    }, delay)
  }
}

// Usage:
const handleSearch = debounce((query) => {
  fetch(`/api/search?q=${query}`).then(renderResults)
}, 300)

searchInput.addEventListener('input', (e) => handleSearch(e.target.value))
// User types "javascript" — 9 keystrokes, but only 1 API call
// The call fires 300ms after the last keystroke

Debounce with immediate option

// Leading edge: fire IMMEDIATELY on first call, then ignore until quiet
// Trailing edge (default): fire AFTER quiet period ends
// Leading + trailing: fire on both

function debounce(fn, delay, { leading = false, trailing = true } = {}) {
  let timerId = null
  let lastArgs = null

  return function(...args) {
    const shouldCallNow = leading && !timerId
    lastArgs = args

    clearTimeout(timerId)
    timerId = setTimeout(() => {
      if (trailing && lastArgs) {
        fn.apply(this, lastArgs)
      }
      timerId = null
      lastArgs = null
    }, delay)

    if (shouldCallNow) {
      fn.apply(this, args)
    }
  }
}

// Leading debounce — great for button click handlers
// First click fires immediately, subsequent rapid clicks ignored until quiet
const handleSubmit = debounce(submitForm, 1000, { leading: true, trailing: false })
submitButton.addEventListener('click', handleSubmit)
// Prevents double-submit on fast double-click, but feels instant on first click

Throttle — built from scratch

function throttle(fn, interval) {
  let lastCallTime = 0

  return function(...args) {
    const now = Date.now()

    if (now - lastCallTime >= interval) {
      lastCallTime = now
      fn.apply(this, args)
    }
    // Calls within the interval are silently dropped
  }
}

// Usage:
const handleScroll = throttle(() => {
  updateScrollIndicator()
  lazyLoadImages()
}, 100)

window.addEventListener('scroll', handleScroll)
// Scroll fires ~100 times per second
// handleScroll executes at most 10 times per second (every 100ms)

Throttle with trailing call — never miss the last event

// Problem with basic throttle: if the last event falls in the ignored window,
// the final position/state is never processed

function throttle(fn, interval) {
  let lastCallTime = 0
  let trailingTimer = null

  return function(...args) {
    const now = Date.now()
    const remaining = interval - (now - lastCallTime)

    if (remaining <= 0) {
      // Enough time has passed — execute immediately
      clearTimeout(trailingTimer)
      trailingTimer = null
      lastCallTime = now
      fn.apply(this, args)
    } else if (!trailingTimer) {
      // Schedule a trailing call for the end of the interval
      trailingTimer = setTimeout(() => {
        lastCallTime = Date.now()
        trailingTimer = null
        fn.apply(this, args)
      }, remaining)
    }
  }
}
// Now the final scroll/resize position is always processed

requestAnimationFrame throttle — the visual update pattern

// For visual updates, throttle to the display frame rate — not a fixed ms interval
function rafThrottle(fn) {
  let frameRequested = false

  return function(...args) {
    if (!frameRequested) {
      frameRequested = true
      requestAnimationFrame(() => {
        fn.apply(this, args)
        frameRequested = false
      })
    }
  }
}

// Perfect for: scroll-linked animations, sticky header position, parallax effects
const updateParallax = rafThrottle(() => {
  const scrollY = window.scrollY
  heroImage.style.transform = `translateY(${scrollY * 0.5}px)`
})

window.addEventListener('scroll', updateParallax)
// Runs at most once per animation frame (~60fps)
// No visual intermediate states are skipped — always uses the latest scroll position

Debounce vs Throttle — choosing the right tool

// DEBOUNCE — when you only care about the FINAL value after activity stops
const searchInput = debounce((value) => {
  fetchSuggestions(value)  // only run when user stops typing
}, 300)

const resizeHandler = debounce(() => {
  recalculateLayout()      // only run when resize is done
}, 200)

const autoSave = debounce(() => {
  saveToServer(editorContent)  // save 2 seconds after last edit
}, 2000)

// THROTTLE — when you need REGULAR updates during ongoing activity
const scrollHandler = throttle(() => {
  updateScrollProgress()   // update every 100ms while scrolling
}, 100)

const mouseMoveHandler = throttle((e) => {
  updateCustomCursor(e)    // track cursor position at 30fps
}, 33)

const logActivity = throttle(() => {
  sendHeartbeat()          // send heartbeat at most once per 10 seconds
}, 10000)

// NEITHER — when every event matters
button.addEventListener('click', handleClick)  // don't throttle discrete clicks
input.addEventListener('focus', handleFocus)   // don't debounce focus events

Cancellation — clearing pending calls

function debounce(fn, delay) {
  let timerId = null

  function debounced(...args) {
    clearTimeout(timerId)
    timerId = setTimeout(() => {
      fn.apply(this, args)
      timerId = null
    }, delay)
  }

  // Cancel pending execution
  debounced.cancel = function() {
    clearTimeout(timerId)
    timerId = null
  }

  // Check if a call is pending
  debounced.pending = function() {
    return timerId !== null
  }

  return debounced
}

// Usage:
const debouncedSearch = debounce(search, 300)
searchInput.addEventListener('input', (e) => debouncedSearch(e.target.value))

// When component unmounts / user navigates away:
debouncedSearch.cancel()  // prevent stale API call from firing after navigation

React hook implementations

// useDebounce — debounce a value
function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay)
    return () => clearTimeout(timer)  // cleanup on value change or unmount
  }, [value, delay])

  return debouncedValue
}

// Usage:
function SearchComponent() {
  const [query, setQuery] = useState('')
  const debouncedQuery = useDebounce(query, 300)

  useEffect(() => {
    if (debouncedQuery) fetchResults(debouncedQuery)
  }, [debouncedQuery])  // only fetches 300ms after user stops typing

  return  setQuery(e.target.value)} />
}

// useThrottle hook:
function useThrottle(fn, interval) {
  const fnRef = useRef(fn)
  useEffect(() => { fnRef.current = fn }, [fn])

  return useCallback(
    throttle((...args) => fnRef.current(...args), interval),
    [interval]  // stable reference — throttle function not recreated on renders
  )
}