Debounce a function in plain JavaScript

Run a function only after the user stopped typing, without pulling in a library for it.

SNP 022 #B31 Filed js webdev

Debouncing waits until the calls stop coming for a while, then runs once. Perfect for search fields and resize handlers.

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

Use it like this:

javascript
const search = debounce((query) => fetchResults(query), 300)

input.addEventListener('input', (event) => search(event.target.value))

Every keystroke resets the timer, so fetchResults runs 300 ms after the last one.