无限滚动导致随机数 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

将loadMoreData.php改成bwlow。从上一个

中删除 echo json_encode($json);

<?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');

?>

更新

停止滚动直到最后一个 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>

无限滚动导致随机数 1 在实际数据之前打印

Infinite scroll causing random number 1 to print before actual data

javascript

php

ajax

jquery

infinite-scroll