ajax回调后增量计数器不起作用

Question

我打算使用 Ajax 无限滚动从数据库中加载更多项目。当我使用 id=results 滚动到 div 的底部时，ajax 第一次工作正常，并从数据库中追加第 21-31 行。注意：offset = 20 和limit = 10。offset 设置为回调后变为30（即offset +=10）。 但是，在进一步滚动时，偏移值没有改变。相同的第 21-31 行被反复多次返回。 请问这个怎么解决？

index.php

<div class="row" id="result">
<?php 

$offset=0;
$limit = 20;

$query =$con->prepare("SELECT xxx FROM yyy LIMIT ? OFFSET ?");
$query->bind_param('ii', $limit, $offset);
$query->execute();
$result = $query->get_result();

while($row=$result->fetch_assoc()){
?>

    <div class="col-md-3 mb-4">  
        <div class="card-deck h-100">      
            <div class="card border-secondary">
                <img src="<?php echo $row['ppp']; ?>" class="card-img-top img-fluid">
                <div class="card-body">
                    <h6 class="font-weight-bold text-secondary text-center mt-1"><?= $row['mmm']; ?></h6>
                    <hr class="mt-1 mb-1">
                    <h6 class="card-title text-danger">NGN<?= number_format($row['nnn']); ?> /-
                    </h6>
                    <hr class="mt-1 mb-1">
                    <small class="text-secondary">Fabric Used: <?php echo $row['fff'];?>
                        <br>                                                
                    </small>
                            
                    <a href="product-details.php?ProductId=<?= $row['iii'] ?>" class="btn btn-info btn-block addItemBtn"><i class="fas fa-cart-plus"></i> Order Now</a>
                </div>
            </div>
        </div>
    </div>
<?php   
} // endwhile
?>
</div>

<div class="p-3 text-center" style="display: block" >
    <button class="btn btn-danger" type="button" disabled>
        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
          Loading more items...
    </button>
</div>

<script type="text/javascript">
var flag = 20; //offset initial value 
$(window).scroll(function (){ //scroll function
    if($(window).scrollTop() >= $('#result').height() - $(window).height()){
         
        $.ajax({
              type: 'POST',
              url: 'results.php', //get result page
              data: {'offset': flag,'limit': 10},
              success: function(data){
                    $('#result').append(data);
                    flag +=10; //add 10 to last offset value after callback
           }
        }); //close ajax
    }
});
</script>

结果.php

<?php 

if(isset($_POST['offset']) && isset($_POST['limit'])){
    $offset = $_POST['offset'];
    $limit = $_POST['limit'];

    if($sql = "SELECT xxx FROM yyy LIMIT ? OFFSET ?"){
        $query = $con->prepare($sql);
        $query->bind_param('ii', $limit, $offset);
        $query->execute();
        $result = $query->get_result();
        while($row=$result->fetch_assoc()){
?>
            <div class="col-md-3 mb-4">         
                <div class="card-deck h-100">      
                    <div class="card border-secondary">
                       <img src="<?= $row["ppp"] ?>" class="card-img-top img-fluid">
                        <div class="card-body">
                            <h6 class="font-weight-bold text-secondary text-center mt-1"><?= $row["mmm"] ?></h6>
                            <hr class="mt-1 mb-1">
                            <h6 class="card-title text-danger">NGN <?= number_format($row["nnn"]) ?>
                            </h6>
                            <hr class="mt-1 mb-1">
                            <small class="text-secondary">Fabric Used: <?= $row["fff"] ?></small>
                            <br>
                            <a href="product-details.php?ProductId=<?= $row['iii'] ?>" class="btn btn-info btn-block addItemBtn"><i class="fas fa-cart-plus"></i> Order Now</a>
                        </div>
                    </div>
                </div>
            </div>
<?php
        } // endwhile
    }//end if query successfull
    else{
        echo "Query Failed";
    }
}//end isset 
?>

Answer 1

使用变量来检测您是否处于 AJAX 请求的中间，因此您不会发送重复。

let in_ajax = false;

$(window).scroll(function() { //scroll function
  if (!in_ajax) {
    if ($(window).scrollTop() >= $('#result').height() - $(window).height()) {
      in_ajax = true;
      $.ajax({
        type: 'POST',
        url: 'results.php', //get result page
        data: {
          'offset': flag,
          'limit': 10
        },
        success: function(data) {
          $('#result').append(data);
          flag += 10; //add 10 to last offset value after callback
          in_ajax = false;
        }
      }); //close ajax
    }
  }
});