Posted almost 10 years ago. Visible to the public. Repeats.

Concurrency issues with find-as-you-type boxes

Find-as-you-type boxes are usually built by observing changes in a text field, and querying the server via AJAX for search results or suggestions when the field has changed.

A common problem with this implementation is that there is no guarantee that AJAX responses are evaluated in the same order as the original requests. The effect for the user is that the search results are flashing back and forth while the user is typing the query, and when the user has stopped typing the last results don't always match the final query.

You won't notice this effect while developing on a local development server like Webrick, which processes requests one at a time. You will however notice the effect after deploying on a production server with multiple concurrent worker processes. Consider using Passenger in development instead.

Workarounds

  • An dirty solution for small applications is to make the observe frequency low enough that out-of-order responses become unlikely enough. Try to poll the query field for changes every 0.75 seconds or longer. It will still fail when the server is busy or on flakey connections.
  • A cleaner solution would be to check whether a response contains the matches for the most recent request, and discard all other responses.
  • Or have a client-side queue so you don't send multiple requests at the same time. If you're using Unpoly, up.observe() or up.autosubmit() will do this for you.
  • If you make the request yourself you may also choose to abort an earlier XHR request. You may also abort fetch() requests.

Does your version of Ruby on Rails still receive security updates?
Rails LTS provides security patches for old versions of Ruby on Rails (3.2 and 2.3).

Owner of this card:

Avatar
Henning Koch
Last edit:
3 months ago
by Henning Koch
Keywords:
live, search, race, condition, serialize, debounce
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more