無限滾動導致隨機數字1打印在實際數據之前

Question

我能夠讓滾動本身工作，我有它加載滾動上的下5個項目，但在下一個5出現一個數字1插入上方結果，並一直重複，直到結束。一旦到達終點，滾動繼續打印數字1，就好像它卡在滾動循環中一樣。

另一個需要注意的奇怪點是，如果滾動過快，記錄會重複，就像查詢運行兩次一樣。

scroll.php以下代碼：

<div class="col-md-12" id="post-data"> 
    <?php 
     require('config.php'); 

      $sql = "SELECT postID, postTitle, postDesc FROM blog_posts ORDER BY postID DESC LIMIT 5"; 
      $result = $conn->query($sql); 
    ?> 

    <?php include('data.php'); ?> 

</div> 

<div class="ajax-load text-center" style="display:none"> 
    <p><img src="loader.gif"> Loading More post</p> 
</div> 

<script type="text/javascript"> 
    $(window).scroll(function() { 
     if($(window).scrollTop() == $(document).height() - $(window).height()) { 
      var last_id = $(".post-id:last").attr("id"); 
      loadMoreData(last_id); 
     } 
    }); 

    function loadMoreData(last_id){ 
    $.ajax(
      { 
       url: '/loadMoreData.php?last_id=' + last_id, 
       type: "get", 
       beforeSend: function() 
       { 
        $('.ajax-load').show(); 
       } 
      }) 
      .done(function(data) 
      { 
        $('.ajax-load').hide(); 
        $("#post-data").append(data); 
      }) 
      .fail(function(jqXHR, ajaxOptions, thrownError) 
      { 
       alert('server not responding...'); 
      }); 
    } 
</script> 

data.php下面代碼：

<?php 
    while($post = $result->fetch_assoc()){ 
?> 
<div class="post-id" id="<?php echo $post['postID']; ?>"> 

    <h3><a href=""><?php echo $post['postTitle']; ?></a></h3> 
    <p><?php echo $post['postDesc']; ?></p> 

    <div class="text-right"> 

     <button class="btn btn-success">Read More</button> 

    </div> 

    <hr style="margin-top:5px;"> 

</div> 
<?php 
    } 
?> 

loadMoreData.php下面代碼：

<?php 
    require('config.php'); 

    $sql = "SELECT postID, postTitle, postDesc FROM blog_posts 
    WHERE postID < '".$_GET['last_id']."' ORDER BY postID DESC LIMIT 5"; 

    $result = $conn->query($sql); 

    $json = include('data.php'); 

    echo json_encode($json); 
?> 

Answer 1

change loadMoreData.php as bwlow。從去年

<?php 
    require('config.php'); 

    $sql = "SELECT postID, postTitle, postDesc FROM blog_posts 
    WHERE postID < '".$_GET['last_id']."' ORDER BY postID DESC LIMIT 5"; 

    $result = $conn->query($sql); 

    include('data.php'); 

?> 

更新

刪除echo json_encode($json);對於停止滾動，直到最後Ajax調用完成。你可以使用標誌變量

<script type="text/javascript"> 
    loaded = true; //<-----Initialize 
    $(window).scroll(function() { 
     if(($(window).scrollTop() == $(document).height() - $(window).height()) && loaded) { //<-----Add in condition 
      var last_id = $(".post-id:last").attr("id"); 
      loadMoreData(last_id); 
     } 
    }); 

    function loadMoreData(last_id){ 
    loaded = false; //<----- change it to false as soon as start ajax call 
    $.ajax(
      { 
       url: '/loadMoreData.php?last_id=' + last_id, 
       type: "get", 
       beforeSend: function() 
       { 
        $('.ajax-load').show(); 
       } 
      }) 
      .done(function(data) 
      { 
        $('.ajax-load').hide(); 
        $("#post-data").append(data); 
        loaded = true; //<--- again change it to true 
      }) 
      .fail(function(jqXHR, ajaxOptions, thrownError) 
      { 
       alert('server not responding...'); 
       loaded = true; 
      }); 
    } 
</script>