Stop 04 · JavaScriptTopics · 23/36

Debouncing

In short

Type "iphone" into a search box and a careless app fires six API calls, one per letter. Debouncing waits until you pause typing, then fires just once.

A technique that delays running a function until a burst of calls has stopped for a set time — commonly used on search inputs to avoid firing on every keystroke. Debouncing is useful when intermediate events are not valuable and only the final state matters, such as waiting for a user to pause typing before searching.

The jaadu mascot holds a lift door open as a friend rushes inside.

Think of it like this

The lift door

A lift waits a few seconds before closing. If someone else walks in, the wait starts again. The door only shuts once people stop coming. Debounce works the same way: every new call resets the timer, and the function runs after a quiet gap.

Watch it happen

Typing "iphone" into a debounced search

Keyboard

Timer

search()

"i" → start 400 ms

1/6First letter. The debounced function starts a 400 ms timer.

The big ideas

What you need to know

Every call resets the timer

Each new event cancels the waiting timer and starts a fresh one.

Runs after the last call

The function fires only once the events stop for the delay you chose, say 300 ms.

Perfect for search and autosave

Use it where only the final value matters: search boxes, window resize, saving a draft.

Built on a closure

The timer variable lives in a closure, so every call to the debounced function shares it.

See it in code

Walk through the code

1function debounce(fn, delay = 300) {2  let timer;3  return (...args) => {4    clearTimeout(timer);5    timer = setTimeout(() => fn(...args), delay);6  };7}8 9const search = debounce((text) => {10  console.log("Searching for", text);11}, 400);12 13const box = document.querySelector("#search");14box.addEventListener("input", (e) => search(e.target.value));15// Type "iphone" quickly: logs once, "Searching for iphone"

1/4timer lives in the closure, shared by every call.

...args collects whatever arguments were passed, so the debounced version works with any function. timer survives between calls thanks to the closure.

Save yourself the pain

Common mistakes

Oops

Calling debounce(...) inside the event handler on every keystroke.

Do this instead

That makes a new timer each time, so nothing is debounced. Create the debounced function once, outside the handler.

Oops

Setting a 2-second delay on a search box.

Do this instead

It feels broken. Around 250 to 500 ms usually feels responsive without spamming the server.

Your mission

Count the calls

~20 min

Quick check

A search is debounced by 300 ms. You type 5 letters, 100 ms apart, then stop. How many times does the search run?

Go deeper

1Implement a debounce function from scratch using `setTimeout`/`clearTimeout`. Validate your understanding by applying it in a small practical example.
2Apply it to a search input that calls an API as the user types. Validate your understanding by applying it in a small practical example.
3Compare the resulting behavior with and without debouncing side by side.

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download