javascript - 滚动处理程序错误

Question

我的scroll.window jquery 脚本中有一个错误。该脚本的功能是，当您作为访客滚动到底部时，脚本会显示另外 10 个项目，但有一个默认值。第一个默认值是 0 到 10，当您滚动它时，它会更改为 10 到 20，然后更改为 20 到 30 等等。

但是脚本现在正在做的是，当我向下滚动时，我得到 10 到 20，当我再次滚动时，我得到 20 到 30 和 10 到 20。而我只需要 20 到 30。

function getEvents(first = 0, second = 10) {

var win = $(window);

$.ajax({
    dataType: 'json',
    url: '#',
    success : function(data)

    {
        console.log(first,second);
        $.each(data.slice(first,second), function(i, item) {

            content += '{html}';
            $(content).appendTo("#block-a-events");

        })
    }
});

// add counter 
var counter = 1;
// Each time the user scrolls
win.scroll(function() {
  // End of the document reached?
  if ($(document).height() - win.height() == win.scrollTop()) {
    $('#loading').show();

    getEvents(counter * 10 , ++counter * 10 );

  }
});

}

Answer 1

我认为您没有正确关闭 getEvents() 函数。在 var counter = 1; 之前添加另一个 }，并在 getEvents 之后添加 var win = $(window);功能:

function getEvents(first = 0, second = 10) {
  // ajax call
  console.log(first);
  console.log(second);
}

var win = $(window);
// add counter 
var counter = 1;
// Each time the user scrolls
win.scroll(function() {
  // End of the document reached?
  if ($(document).height() - win.height() == win.scrollTop()) {
    getEvents(counter * 10 , (counter + 1) * 10 );
    counter += 2;
  }
});

html {
  height: 800px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Scroll up and down

完整代码:

function getEvents(first = 0, second = 10) {

$.ajax({
    dataType: 'json',
    url: '#',
    success : function(data)

    {
        console.log(first,second);
        $.each(data.slice(first,second), function(i, item) {

            content += '{html}';
            $(content).appendTo("#block-a-events");

        })
    }
});
}

var win = $(window);
// add counter 
var counter = 1;
// Each time the user scrolls
win.scroll(function() {
  // End of the document reached?
  if ($(document).height() - win.height() == win.scrollTop()) {
    $('#loading').show();
    getEvents(counter * 10 , (counter + 1) * 10 );
    counter += 2;
  }
});