在滚动事件中跟踪页码

Question

I have a web page which will be loaded with the contents of page one on load. Once the user scrolls the page I'm loading the contents of remaining pages using ajax call. What went wrong here is that I'm having a variable which will be initialized to 2 ( since page one is loaded on loading the page ) to keep track of the page number. What I thought is I would increment this variable once the user scrolls so that it would be pointing to the next page. But Its doesn't work. Its getting incremented before the ajax call is over. So Its missing out many pages. Can anyone tell me the better way to do this ? here is the code..

var pageNo = 2;

$(window).scroll(function() { if($(window).scrollTop() == $(document).height() -$(window).height()) {

    console.log('pageNo ' + pageNo);
    $.ajax({
        type: 'POST',
        cache: false,
        dataType: 'json',
        url: 'url'+pageNo,
        success: function(data, status, xhr) {
        $.each(data,function(i, item) {
           var tp = $('content');
           $('#trpcontainer').append(tp);
        });
    },
    error: function(jqXHR, textStatus, errorThrown) {

    }
});
}
  pageNo = pageNo + 1;
}); 

Answer 1

Try This one in Example

Require Some Modification because also count UP Scrolling

HTML

  <div>Try scrolling the iframe.</div>
  <p>Paragraph - <span>Scroll happened!</span></p>

JS

  $( "p" ).clone().appendTo( document.body );
  $( "p" ).clone().appendTo( document.body );
  $( "p" ).clone().appendTo( document.body );
  $( "p" ).clone().appendTo( document.body );
  $( "p" ).clone().appendTo( document.body );
  var pag=0; 
  $( window ).scroll(function() {
  pag+=1;
  $( "span" ).css( "display", "inline").append(pag); 
  });