Question

我正在使用此方法来检测两个div列的结尾并加载新帖子。这是工作。但是问题是，首先它默认情况下加载五个帖子，然后当用户向下滚动时，它将加载下五个帖子（第二阶段）至少10次。而不是向下滚动时，它将至少再次加载下5个帖子（第3阶段）。否则功能就好。

<script>
  $(window).scroll(function() {
    if($(window).scrollTop() >= $('.div1').height() - $(window).height()) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
				$('#loadmoreinstagram').remove();
                document.getElementById("instagramresponse").innerHTML = document.getElementById("instagramresponse").innerHTML+this.responseText;
            }
        };
        xmlhttp.open("GET", "<?php echo $settings['URL']; ?>getdata.php?type=" + $('#type').last().val() + "&page=" + $('#page').last().val() + "&lasttime=" + $('#lasttime').last().val(), true);
        xmlhttp.send();
    }
     if($(window).scrollTop() >= $('.div2').height() - $(window).height()) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
				$('#loadmoretwitter').remove();
                document.getElementById("twitterresponse").innerHTML = document.getElementById("twitterresponse").innerHTML+this.responseText;
            }
        };
        xmlhttp.open("GET", "<?php echo $settings['URL']; ?>getdata.php?type=" + $('#typetwitter').last().val() + "&page=" + $('#pagetwitter').last().val() + "&lasttime=" + $('#lasttimetwitter').last().val(), true);
        xmlhttp.send();
    }
});
  </script>

Answer 1

您的问题是window.scroll事件为一个“滚动”触发多次。您可以通过将以下内容粘贴到控制台中来简单地记录事件，从而看到这一点。

$(window).scroll(function() {console.log('scroll')})

要解决此问题，您需要在短时间内阻止您的请求连续多次触发。这称为反跳。 Underscorejs具有强大的内置函数，但是快速的Google会产生大量资源来编写您自己的资源。下面的代码使用underscorejs函数解决了您的问题。

var debouncedFn = _.debounce(function() { console.log('scroll')}, 100)
$(window).scroll(debouncedFn)

了解有关去抖动https://davidwalsh.name/javascript-debounce-function

的信息

针对您的应用：

</script>
  function debounce(func, wait, immediate) {
      var timeout;
      return function() {
          var context = this, args = arguments;
          var later = function() {
              timeout = null;
              if (!immediate) func.apply(context, args);
          };
          var callNow = immediate && !timeout;
          clearTimeout(timeout);
          timeout = setTimeout(later, wait);
          if (callNow) func.apply(context, args);
      };
  };

  function handleScroll() {
    if($(window).scrollTop() >= $('.div1').height() - $(window).height()) {
          var xmlhttp = new XMLHttpRequest();
          xmlhttp.onreadystatechange = function() {
              if (this.readyState == 4 && this.status == 200) {
          $('#loadmoreinstagram').remove();
                  document.getElementById("instagramresponse").innerHTML = document.getElementById("instagramresponse").innerHTML+this.responseText;
              }
          };
          xmlhttp.open("GET", "<?php echo $settings['URL']; ?>getdata.php?type=" + $('#type').last().val() + "&page=" + $('#page').last().val() + "&lasttime=" + $('#lasttime').last().val(), true);
          xmlhttp.send();
      }
       if($(window).scrollTop() >= $('.div2').height() - $(window).height()) {
          var xmlhttp = new XMLHttpRequest();
          xmlhttp.onreadystatechange = function() {
              if (this.readyState == 4 && this.status == 200) {
          $('#loadmoretwitter').remove();
                  document.getElementById("twitterresponse").innerHTML = document.getElementById("twitterresponse").innerHTML+this.responseText;
              }
          };
          xmlhttp.open("GET", "<?php echo $settings['URL']; ?>getdata.php?type=" + $('#typetwitter').last().val() + "&page=" + $('#pagetwitter').last().val() + "&lasttime=" + $('#lasttimetwitter').last().val(), true);
          xmlhttp.send();
      }
  }

  var debouncedScroll = debounce(handleScroll, 100)
  $(window).scroll(debouncedScroll);


</script>

Answer 2

通常，如果您使用的是jquery，则会执行以下操作：

$.get(url).done( result => {
  // do stuff when ajax is done
})

，但是您在此处进行的此设置似乎仅依赖于用户的滚动操作来激活done中要执行的操作。因此，除了将其发回给开发人员之外（根据您在其他地方发表的评论），我不确定要告诉您什么。

jquery的常规实现如下：

<script>
    var working = false;
    $(window).scroll(function() {
        if($(window).scrollTop() >= $('.div1').height() - $(window).height() && !working) {
            working = true;
            $.get( url ).done( result => {
                $('#loadmoreinstagram').remove();
                $("#loadmoreinstagram").html = $("#loadmoreinstagram").html + result.responseText;
                working = false;
            } )
        }
        if($(window).scrollTop() >= $('.div2').height() - $(window).height() && !working) {
            working = true;
            $.get( url ).done( result => {
                $('#loadmoretwitter').remove();
                $("#loadmoretwitter").html = $("#loadmoretwitter").html + result.responseText;
                working = false;
            } )
        }
    });
</script>

您可以看到差异，即您的开发人员没有使用jquery来简化这些困难的事情。

检测滚动到div底部并加载新帖子

2 个答案: