处理Ajax请求

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.

Answer 1

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){
        }
     });
});