Question

首先，我在代码方面不是很先进，而且往往只是兼职，所以请原谅所有可怕/丑陋的代码！我很欣赏已经有一些解决方案，但我似乎无法使其中的任何一个与我的代码一起使用，所以非常感谢一些帮助！

我正在使用同位素网格并尝试设置无限滚动。我希望在用户通过从数组中获取这些图像并将它们附加到临时div来滚动到底部时一次加载10个图像。

这在滚动缓慢时工作得很好，但是一旦你快速滚动，这个功能似乎会多次闪现，它会有一点小问题并且一次加载很多图像。

$(window).scroll(function() {

var scrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
var docuHeight = $(document).height();

if(scrollTop + windowHeight == docuHeight){

  nextTenImages = imagesData.splice(0,10);
  var content = ""
  for (var i = 0; i < nextTenImages.length; i++) {
      content +=
      "<div class='box " + nextTenImages[i]["type"] + "'" + ">" +
        "<div class='box-wrapper'>" +
          "<img src='" + nextTenImages[i]["src"] + "' />" +
        "</div>" +
      "</div>"
  };

  $('body').append('<div id="temp-load"><div id="grid"></div></div>');
  $('#temp-load > #grid').append(content)

  $('#temp-load > #grid').children().css({
      opacity: 0
  });

  var toAdd = $('#temp-load > #grid').html();

  $container.isotope('insert', $(toAdd), function(){
    $container.children().css({
      opacity: 1
    });
    $('#temp-load').remove();
  });

}

});

Answer 1

执行一次超时以运行回调。这可以避免函数多次执行。

var timer;

function scrollEvt() {
    /* scroll actions */
}

$(window).scroll(function() {
    /* clear the old timeout */
    clearTimeout(timer);
    /* wait until 400 ms for callback */
    timer = setTimeout(scrollEvt, 400);
});

使用其他方式可能会导致问题（例如比较(window.performance || Date).now()）...

Answer 2

取消绑定特定的滚动事件，直到您的延迟操作完成，以防止累积更多的事件触发器，从而在您的情况下创建重复行为。

＆＃13;

var winCached = $(window),
  docCached = $(document)

var currLeng = 0;

function addContent() {
  dettachScrollEvent();
  setTimeout(function() { //this timeout simulates the delay from the ajax post
    for (var i = currLeng; i < currLeng + 100; i++)
      $('div').append(i + '<br />');
    currLeng = i;
    console.log("called loader!");
    attachScrollEvent();
  }, 500);

}

function infiNLoader() {
  if (winCached.scrollTop() + winCached.height() > docCached.height() - 300) {
    addContent();
    //alert("near bottom! Adding more dummy content for infinite scrolling");
  }
}

function attachScrollEvent() {

  winCached.scroll(infiNLoader);
}

function dettachScrollEvent() {
  winCached.unbind('scroll', infiNLoader);
}
addContent();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

＆＃13;

快速滚动时多次触发功能

2 个答案: