Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
AJAX and databases? How do the two come together in this? – Oded May 11 '12 at 20:13
yea i was kind of vague. Its a web app with data being sent/retrieved via ajax more specifically jQuery.get/post. – Ominus May 11 '12 at 20:23
up vote 8 down vote accepted

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.

share|improve this answer
Programmatically nesting the callbacks is a solid solution. – Sam May 11 '12 at 20:23

This is not a race condition.

A race condition would occur when the behavior between two asynchronous threads becomes undefined. You can solve this problem by nesting the callback from the first call

share|improve this answer
Not all AJAX calls will complete at the same speed due to possible network hiccups. We see it even in development on our local network, where a later AJAX call will finish before an earlier one, and the UI ends up wrong. Nesting/queueing callbacks will solve it, but this is a race condition. – Izkata May 11 '12 at 21:57

Generally speaking callbacks are universal tool for dealing with async task's and indeed callbacks is the mechanism to handle AJAX requests in JavaScript. In the context of the callback you can even have reference to the row that is clicked(if closed in closure). You can find the following articles useful: jQuery deferred and Using Deferreds in jQuery

One other thing that you should have in mind, if the user is allowed to click multiple buttons, is that multiple request will be started. However different browsers can handle different number of AJAX requests simultaneously: concurrent-ajax-xmlhttprequest-requests. To overcome this you should implement some basic request queue.

share|improve this answer
+1 for being the only one talking about deferred stuff. – Florian Margaine May 14 '12 at 8:01

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.