Kill JQuery AJAX overlapping requests

Is it possible to kill a previous ajax request?

We have tabular data very adjacent to each other. On mouseover event of each data we are making a request to our server using JQuery Ajax object and showing in popup.

But as frequently we move mouse to other tabular contents previous Ajax responses are being displayed inside popups prior exact response being displayed which is meant for that tabular content.

I need when new Ajax request is generated previous request/r开发者_如何学Goesponse should be killed, so that always expected latest response is available inside popup.

I am using JQuery, PHP and Mysql to server the request.

---

Could you create a custom Javascript Sync object which would be shared by the function making subsequent ajax calls? Assign a sequentially generated id as a parameter to the request call going in. Include the same id in response. On firing every request assign a new id, incremented by 1 or whatever logic. If the current id in response is not same as the one in shared object; ignore the response else render the response.

this would cleanly solve the race condition. I am not sure myself if there is a way to kill the request prematurely but it would at least not create rendering problem that you face now.

---

Another option would be not to initiate another request until the first is completed.

---

Yes and no. That is the point of Ajax. To be able to do something asynchronously. What you are wanting to do is to abort a request which destroys the idea of asynchronously. Perhaps what you can do is, if you send another request, set a value somewhere indicating the number of requests, then in the callbacks to your requests, check if the amount of request is higher than 1, if so ignore the response.

---

Check this AJAX Manager plugin. The XmlHttpRequest has an abort() function but jQuery doesn't have a wrapper for it.