Async

Race lab

Search as you type sends one request per keystroke. The server answers short queries slower than long ones (more matches to rank), so the responses come back out of order. Each bar is one request, from the moment it was sent to the moment its response arrived; the list on the left shows whichever response was rendered last.

Try this

1. Naive, press ▶. The box says "taco"; what does the list show, and why is the bar for "t" the longest?
2. Ignore stale: every request still reaches the server, but only the latest one may render. Which bars are "dropped"?
3. AbortController: the previous request is cancelled. Compare the number of finished requests with Ignore stale.
4. Tick debounce and press ▶ in each mode. How many requests are sent now? Is the race gone, or just less likely?
5. Type slowly by hand in Naive mode. Does the bug appear? A bug that depends on timing is called a race condition.