Debounce & Throttle

Click timeline

Click the button rapidly, then stop. Watch how the three timelines respond differently. Raw fires every time. Throttled fires at most once per 300ms. Debounced waits until you stop.

Leading vs trailing edge

The “edge” is which end of the quiet period triggers the handler. Most debounce implementations default to trailing. Most throttle implementations default to leading.

Build it from scratch

debounce

function debounce(fn, ms) {
  let timeouttimer id
  return (...args) => {return wrapper
    clearTimeout(timeout)cancel pending
    timeout = setTimeout(
      () => fn(...args), msreschedule
    )
  }
}

throttle

function throttle(fn, ms) {
  let last = 0last fire time
  return (...args) => {return wrapper
    const now = Date.now()current time
    if (now - last >= ms) {enough time passed?
      last = nowfire + update
      fn(...args)
    }
  }
}