Stop ajax function in the middle when another element is clicked

Question

Hi, I have a page with list data.

When I click on a list item, the Ajax function is called, which populates some date in the right column.

Now wat works: -

I click on an element -> I see load.gif for a few seconds -> data is loading.

When I click on another element in the middle, the first function ends, and only then the second request is executed.

What I want: -

when I click and load ajax, I click between them again, the previous function should stop, and my new request should be executed.

Answer 1

You can stop AJAX requests (I assume that you do not want to actually stop the AJAX response handler function (which should take the least time in a normal AJAX script), but want to stop the request: Look here :

Basically, save the request object somewhere (closure, global variable or anywhere), and whenever you start a new request, check if the old one is still running, and if so, call the abort() method on old ask!