在滚动事件中跟踪页码

Question

我有一个网页，将载入第一页的内容。 用户滚动页面后，我将使用ajax调用加载其余页面的内容。 这里出问题的是，我有一个变量，它将被初始化为2（因为在加载页面时加载了第一页）以跟踪页码。 我想是，一旦用户滚动，我将增加此变量，以便它指向下一页。 但是它不起作用。 在ajax调用结束之前，其递增。 因此，它错过了很多页面。 有人可以告诉我更好的方法吗？ 这是代码。

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

在示例中尝试这个

需要进行一些修改，因为还需要向上滚动

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); 
  });