如何清除旧的ajax请求

I am trying to write a code for getting products on Scroll Steps i following like 1 ] search product 2 ] Getting result on one div 3 ] And on the scrolling of result div want next product

but what happening on every search hit and scrolling product Calling many ajax request at a time what i want only once that ajax should call( and not old ajax request )

my jQuery code is

 jQuery("#product_search_filter").submit(function () {
   jQuery(".load_more_result").remove();
    jQuery.ajax({
        url: ajaxurl,
        type: "post",
        data: jQuery(this).serialize(),
        dataType: "json",
        success: function (products) {
            var load_more = 0;
            jQuery(".right_bar_sub_inner").html("");
            jQuery.each(products, function (i, data) {
                if (this.image) {
                    jQuery(".right_bar_sub_inner").append('<div class="product_show" alt="' + i + '"> <img class="right_bar_img size-auto" src="' + this.image + '" title="'+ this.title +'"> </div>');
                }
            });
            jQuery(".right_bar_sub_inner").append("<div class='load_more_result'>Load More...</div>");
            var start = false;

            jQuery(".right_bar_sub").scroll( function(){
                var _data = jQuery("#product_search_filter").serialize();
                _data += "&offset=" + load_more;
                jQuery(".load_more_result").css('opacity','0.1');                                            
                jQuery.ajax({
                    url: ajaxurl,
                    type: "post",
                    data: _data,
                    dataType: "json",
                    success: function (products) {
                        jQuery.each(products, function (i, data) {
                            if (this.image) {
                                jQuery(".load_more_result").before('<div class="product_show" alt="' + i + '"> <img class="right_bar_img size-auto" src="' + this.image + '" title="'+ this.title +'"> </div>');
                            }
                        });
                        jQuery(".load_more_result").css('opacity','1');
                        start = false;
                    }
                });
                return false;
            });
        }
    });
    return false;
});

You can see that problem at Lamp-database

try to search again then see on console of firebug you can see first time only one request is calling on scroll if you search again then two request is calling

and So on...

What you probably want is to not make an ajax request on each scroll event, but instead make the ajax request when the user has stopped scrolling for some time. For that to happen, you can restart a timer on each scroll event, which after reaching a particular value (250ms in the example) will trigger the actual ajax request.

e.g. you could on each scroll call scrolled()

var timeoutid;
jQuery(".right_bar_sub").scroll( function() {
  scrolled();
  //...
});

function scrolled() { //delay the request. 
  clearTimeout(timeoutid); //otherwise it will be called multiple times
  timeoutid=window.setTimeout("ajaxcall()", 250); //make ajax request in 250 ms
}

function ajaxcall() {
 //make your ajax request here
}