How to clear old ajax request - php

Question

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...

Answer 1

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
}