Ajax Race Conditions – How to Prevent Them

ajaxdesign-patternsjavascript

Is there a pattern or standard way to handle Ajax race conditions? Take the following example. You have two tables. Clicking a row on table 1 removes the data from DB and then updates table 2 (which would now be showing all the rows of table 1 less the row that was clicked).

If someone where to click a bunch of rows in fast succession you could get a scenario where table 2 doesn't update for all the clicks do to timing/lag issues.

What might be a good way to approach this? I was thinking of using a possible queue but that kind of defeats the purpose of doing it asynchronously. However I would still have the benefit of the UI not locking.

Best Answer

Just a thought, perhaps you could create a list for your Ajax callback methods. You would wrap your actual Ajax callback in a method that adds that callback to a slot in an list.

This list waits for callbacks in a specific order and only executes if the top element (the callback you want called first) is filled.

Related Topic