I have a function that is called when scroll
reaches the bottom of my div element.
$(document).ready(function(){
$("#container").scroll(function() {
var current_scrollbar_position = Math.round($(this).scrollTop());
var inner_height = Math.round($(this).innerHeight());
var advertiser_dropdown_height = $(this)[0].scrollHeight;
var dropdown_bottom = current_scrollbar_position + inner_height;
if(dropdown_bottom >= Math.round(0.75*(advertiser_dropdown_height)))
{
load_advertisers();
}
});
});
function load_advertisers(){
// calling ajax function
}
When scroll
reaches the end, it calls load_advertisers()
method. But it calls load_advertisers()
more than once. As a result, it aborts any other request, and only fetches data from one request. So, if we inspect the console, it shows 5-6 aborted ajax requests (in red). Why does it happen? How can I prevent another request if the previous request is processing?
Any help is appreciated.
Thanks.