滚动加载更多数据

Hy guys, I have made a script that on scroll to send some ajax request.After that I will append the response to div.The problem is that on the scroll hit the bottom the ajax will send 4-5 request instead one. I have set a variable offset that will increase with one at each request.For each request I need to select 12 items.The offset it's to calculate the number of rows that will be skipped (2*12,3*12,etc).The problem is that sometimes offset remain 0 and after some request this will increase

the script

 $(document).scroll(function(){
   if($(window).scrollTop() + $(window).height() > $(document).height() - 500){

    string="offset="+offset+'&'+"plusskip="+fistskip;
    $('#listaHolder').append('<div class="ajaxLoader"></div>');



    $.ajax({

      type: "POST",

      url: siteURL+"libs/ajax/ajax_foto.php",

      data:string,

      success:function(response){
        offset=offset+1;
        fistskip=0;
        $('.ajaxLoader').remove();


        $('#listaHolder').append(response);


      }

    });
}

});

Every time you scroll its going to call the ajax function, so when your past your mark of 500 its going to keep calling the function. You need to put in some logic that checks if ajax is loading and maybe if there is more content to load.I would separate the ajax function and the scroll listener to make things easier.

var loading = false;

$(document).scroll(function(){
   if($(window).scrollTop() + $(window).height() > $(document).height() - 500){
      if(!loading)
      {
          ajaxFunction();
      }
   }
});

function ajaxFunction()
{
    loading = true;
        $.ajax({

      type: "POST",

      url: siteURL+"libs/ajax/ajax_foto.php",

      data:string,

      success:function(response){
        offset=offset+1;
        fistskip=0;
        $('.ajaxLoader').remove();


        $('#listaHolder').append(response);
        loading = false;

      }

    });
}

I'm not sure what you mean by the offset, could you explain a bit more in a comment.