為什么“無限滾動”不會停止加載內容？

Question

我正在使用“無限滾動”腳本，即使沒有更多記錄，該腳本也會不斷向數據庫發送請求。 發生這種情況時，它將重新加載頁面上的最后一組。 我希望函數在到達數據庫的最后一條記錄時停止運行。 我是JS的新手，所以這對我來說很難解決，而且我沒有使用jQuery。 我正在PHP腳本中完成大部分工作。

我在這里閱讀了很多有關“無限滾動”的文章，但我無法理解其他人如何檢查JS中的限制。

的JavaScript

function loadPosts(){
    var target = document.getElementById('PostsContainer');
    var contentHeight = target.offsetHeight;
    var yOffset = window.pageYOffset;
    var y = yOffset + window.innerHeight;
    if(y >= contentHeight){
        var xhr = ajaxObj("POST", "loadContent.php");
        xhr.onload = function(){
            target.innerHTML += xhr.responseText;
        }
        xhr.send("action=loadMore");
    }
}
window.onscroll = loadPosts;

的PHP

$sql = "SELECT * FROM posts WHERE post_type = 'a' ORDER BY post_date DESC LIMIT 2" //Original content on page

$totalPosts = 12; (query to DB)
$max = 1;
$current = 2; //Start on record after initial content

while($current < $totalPosts){
  $sql = "SELECT * FROM posts WHERE post_type = 'a' ORDER BY post_date DESC
  LIMIT $current, $max";
  $result = $db_link->query($sql);
  $posts_list += ... //Collect the data from DB
  $current++;
}
echo $posts_list;

無論我滾動多少次，即使在數據庫中的記錄用完之后，新內容也會繼續加載。 每當我到達頁面底部時，輸出就會不斷重復。 在這種情況下，我在數據庫中有7個帖子，我從7、6開始...然后我不斷收到5-1。

Answer 1

因此，在這種情況下，您可以做的是，只需從php或server side在json中添加一個參數，該參數將告訴您是否存在數據，基於此，您可以停止調用loadPosts函數

所以基本上算法就像

... php

while($current < $totalPosts){
......................
......................

  if($current >= $totalPosts)
  {
     $getNext = False;
  }
  else
  {
   $getNext = True;
  }
}

... javasrcipt

function loadPosts(){

   if(!getNext)
     return false;
   else
   {
   ......................
   ......................
   }
}
window.onscroll = loadPosts;

希望這個策略對您有幫助