檢測滾動到div的底部並加載新帖子

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事件針對一個“ 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來簡化困難的工作。