Question

I am doing a gallery which has a function for navigating in between photos,
next and previous.

Next and previous toggle plenty of asynchronous ajax calls so that there is the possibility to navigate in between photos fast.

Now here is my problem, assume I am at photo #1 and then I perform : next, previous, next, previous.

As the ajax calls are asynchronous then info retrieved for photo 2 ends mixed with info for photo 1 and so forth.

So I need to abort existing ajax calls at next and previous and then make the ajax calls.

I tried the following way:

var xhr=false;

function(){

if(xhr){   
xhr.abort();
}

xhr=$.ajax({

});

}

This does not do it, seems some requests are not aborted when rapidly going in between next and previous in my code.

Answer 1

The ajax() function returns a promise, so you could use done() to trigger the next ajax call. If the previous ajax call fails, done() won’t get called.

Reference: http://api.jquery.com/category/deferred-object/