Handle Ajax request

Question

In a page, I am having multiple images. I will show a div container for preview. Here, before loading the image, I will send a request to my server to get image conversion details. Once, its success, I will show the image preview. When user click next/Previous icon, I will load the respective image. But, If user click next/previous icons continuously, Ajax requests will be sending over and over again. Here, If any delay is there in Ajax request. Proper image is not showing in the preview. For example: If user click continously, Ajax request data related to 5.jpg. But, in preview it is showing 4.jpg image. How to handle this.

@e11438 is right. But maybe that helps: [Abort](http://stackoverflow.com/a/446626/1293700) the current request and open a new request. — Darius, May 15 '16 at 13:52
Problem description is not clear and you need to provide relevant code. See [mcve] — charlietfl, May 15 '16 at 14:10

score 0 · Answer 1 · answered May 15 '16 at 14:06

Do this:

Every time a button is clicked, store the request in a variable.

var request = $.ajax({
    url: 'your url',
    success: function(data){
    }
 });

Now when the user clicks the button again, in the click handler, abort the old request.

request.abort();

Something like:

var request = null;
$('.button').click(function(){
     if(request){
        request.abort();
     }

     request = $.ajax({
        url: 'your url',
        data: 'which image to load',
        success: function(data){
        }
     });
});

Handle Ajax request

1 Answers1