Question

I have a race condition in which I do not want an AJAX call to occur, if a form on the page is currently submitting.

I’d rather not alter the code for the form.

I was thinking of attaching event handlers to each of the form elements so that onsubmit it would increment a counter and then on onreadystatechange decrement the counter.

Then before the AJAX call, check to ensure the counter is zero before firing.

However is there an easier way such as (pseudo code):

form.isSubmitting 

---

EDIT:

The race condition is not because of the JavaScript per-say. It is caused by what happens on the server side on response of the ordering of these actions.

To give you an idea of the broader problem:

A cookie is set when the form post returns.
On the AJAX call (needs to happen every X seconds)… the server-side (if the form post has happened) expects the cookie to be set.

Sometimes….

If there is a delay in the form submission returning (and setting the cookie client side), the AJAX call is triggered without sending the cookie back.

The server expects the cookie, because as far as it is concerned the form post has been successful.

However it is the client side I need to control to ensure the actions are performed in a prescribed way.

So correct JavaScript itself cannot cause race conditions, but (as far as my testing has shown) – the submission and returning of POST/AJAX calls causes a race condition in my particular case.

Answer 1

There are no “race conditions” in Javascript on a web page, because there’s just one thread of execution. If you want to prevent event handlers from doing anything after a form has been submitted (or at any time, really), the very simplest thing to do is set some globally-accessible flag. The handler routines just have to check for that. Of course it’s important that the flag is cleared when appropriate.

edit — OK after your edit, it’s a little more clear what you’re doing, but one thing is not clear: how exactly is the form being posted? Is it a “natural” form post? If that’s the case, the whole page is going to be reloaded by the response. Is the target a separate <iframe> perhaps?

Or is the form being submitted by some other AJAX code?

1. If the form is being submitted “naturally” by the browser, and we’re talking about a whole page being reloaded, then that’s probably the simplest case. The form’s “submit” handler should simply set the global flag, and the code running via the interval timer should just do nothing on the intervals when the flag is set. There’s no need to worry about clearing the flag, because the page is going to blasted by the response anyway.

2. If the form is posting within an <iframe> on the page, or posting to a hidden <iframe>, then it’s almost the same as (1) except that the response page will need to clear the global flag. Exactly how to do that depends on what the application setup involves, but basically it’ll just be some Javascript in the response that sets top.postingFlag to false (or whatever).

3. If it’s separate AJAX code that’s posting the form, then you’d set the flag when you start the XMLHttpRequest, and clear it in the handler(s) for success/failure.

In all cases, the key is for code in the interval timer to watch for the state of the flag, and avoid posting when the flag is set.