Member-only story
A debounced search box still ended on the wrong results in about 1 of 10 sessions. Aborting the old request fixed it
I wanted to know what debounce actually does for a search-as-you-type box, so I stopped guessing and counted. Five ways of handling the keystrokes, 1,500 simulated typing sessions, one fake server. The short version: debounce cut requests by about a third and did nothing for the bug I cared about, which is an old response landing after a newer one.
What I ran
Everything ran on Node 22.23.4 with lodash 4.18.1, on a 2-core Xeon at 2.1 GHz. The numbers are from that box only.
Each session types a 12-character query, one request per prefix length. The gap between keystrokes is random between 40 and 220 ms, and the debounce wait is 100 ms. The fake server answers each request after a random 60 to 400 ms. Keystroke times and server latencies are seeded, so every strategy saw exactly the same typing and the same delays. That’s 500 sessions with three seeds, so 1,500 sessions per strategy.
The five strategies:
- no debounce and no abort, so every keystroke sends a request
- lodash debounce(fn, 100)
- a debounce I wrote myself, the usual clearTimeout and setTimeout pair
