prevent calling ajax multiple times

Question

I am trying to figure out ways to prevent ajax from being called multiple times. Below is my code. I created a scrollable div, my goal is, once the scroll inside this div is about to reach the bottom, I want to call the ajax. Everything works so far. But the problem is, whenever I scroll the div fast enough to the bottom, the ajax is being called multiple times.

$('.scroll_div').scroll(function(){

    var scroll_pos = $(this).scrollTop();
    var outer_height = $(this).height();
    var inner_height = $(this)[0].scrollHeight;
    var scroll_end = scroll_pos + outer_height;

    if(scroll_end >= inner_height-300){

        $.ajax({
                type: 'POST',
                url: 'ajax/get_info.php',
                data: {data_type: data_type},
                beforeSend:function(){

                }
        }).done(function(data){
                alert(data);
        });
    }

});

Answer 1

I would put a timer on it - adjust the timeout accordingly, so that the ajax would only fire if the user stays put for a second or two:

$('.scroll_div').scroll(function(){
    if(typeof(myTimer)!='undefined'){
        clearTimeout(myTimer);
    }

var scroll_pos = $(this).scrollTop();
var outer_height = $(this).height();
var inner_height = $(this)[0].scrollHeight;
var scroll_end = scroll_pos + outer_height;

if(scroll_end >= inner_height-300){
        //timer
  myTimer = window.setTimeout(function(){
   $.ajax({
     type: 'POST',
     url: 'ajax/get_info.php',
     data: {data_type: data_type},
     beforeSend:function(){}
      }).done(function(data){
            alert(data);
    });      
 }, 2500);

}

});