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

问题描述 投票:1回答:2

我正在使用此方法来检测两个div列的结尾并加载新帖子。这是工作。但问题是,首先它默认加载五个帖子功能,然后当用户向下滚动时,它会加载接下来的五个帖子(第二阶段)至少10次。比向下滚动更多时,它会再次加载5个帖子(第3阶段)至少10次。否则功能很好。

<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>
javascript jquery scroll
2个回答
0
投票

你的问题是window.scroll事件多次触发一次“滚动”。您只需通过将以下内容粘贴到控制台中来记录事件即可看到此信息。

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

要解决此问题,您需要在短时间内连续多次阻止您的请求。这称为去抖动。 Underscorejs有一个很好的内置功能,但快速谷歌将产生大量的资源来编写自己的。下面的代码使用underscorejs函数解决了您的问题。

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

了解debounce 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>

0
投票

通常,如果您使用的是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来使硬件容易。

© www.soinside.com 2019 - 2024. All rights reserved.