Question

使用jQuery创建了一个ajax调用。我使用GET方法从带有图像的数据库中获取数据。此ajax调用由滚动功能触发。如果用户触底，请激活ajax调用。如果文档准备就绪并加载24行，则将激活第一个ajax调用之后，我使用滚动功能并在每次用户滚动到底部时加载12行。

有时脚本会加载2个具有相同ID的相同图像。它是重复的，但我找不到问题。我尝试了其他方法来停止正在运行的ajax调用的de scroll函数，如果ajax成功则激活滚动功能。下面是jquery和php代码

<script>

$(document).ready(function(){
var count = 0;

//ajax call
    $.ajax({
        type: "GET",
        url: "result.php",
        data: {
            'offset': flag,
            'limit':24
        },
        success: function(data){
            $('.gallery').append(data);
            count += 24;
        }
    });

$(window).on("scroll", windowScroll);


function wscroller(ev) {

  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
  $(".loading").fadeIn().stop();
    $(window).off('scroll', wscroller); 


    $.ajax({
      type: "GET",
      url: "result.php",
      data: {
        'offset': flag,
        'limit': 12
      },
      success: function(data) {
        $(".loading").fadeOut(500).stop();
        $('.gallery').append(data);
        count += 12;
        ;
        $(window).on("scroll", wscroller);
      }
    });
  }
};
});
</script>





<?php
if(isset($_GET['offset']) && isset($_GET['limit'])){

    include_once 'config.php';

    $offset = $_GET['offset'];
    $limit = $_GET['limit'];



    $data = mysqli_query($connection, "SELECT * FROM images ORDER BY uploaded_on DESC LIMIT {$limit} OFFSET {$offset}");

    while($row = mysqli_fetch_array($data)){

        $imageURL = 'uploads/'.$row["file_name"];
        $imageID = $row["id"];
        $type = pathinfo($imageURL,PATHINFO_EXTENSION);
        $path_parts = pathinfo($imageURL);
        $fileExtension = $path_parts['extension'];
        if($fileExtension == "jpg"){
            print'<div class="grid_photo"><img class="photos" src="' . $imageURL . '" alt="" nr="' . $imageID . '" /></div>';
        }elseif($fileExtension == "JPG"){
            print'<div class="grid_photo"><img class="photos" src="' . $imageURL . '" alt="" nr="' . $imageID . '" /></div>';
        }elseif($fileExtension == "png"){
            print'<div class="grid_photo"><img class="photos" src="' . $imageURL . '" alt="" nr="' . $imageID . '" /></div>';
        }elseif($fileExtension == "PNG"){
            print'<div class="grid_photo"><img class="photos" src="' . $imageURL . '" alt="" nr="' . $imageID . '" /></div>';
        }elseif($fileExtension == "jpeg"){
            print'<div class="grid_photo"><img class="photos" src="' . $imageURL . '" alt="" nr="' . $imageID . '" /></div>';
        }elseif($fileExtension == "JPEG"){
            print'<div class="grid_photo"><img class="photos" src="' . $imageURL . '" alt="" nr="' . $imageID . '" /></div>';
        }elseif($fileExtension == "gif"){
            print'<div class="grid_photo"><img class="photos" src="' . $imageURL . '" alt="" nr="' . $imageID . '" /></div>';
        }elseif($fileExtension == "GIF"){
            print'<div class="grid_photo"><img class="photos" src="' . $imageURL . '" alt="" nr="' . $imageID . '" /></div>';   
        }elseif($fileExtension == "mp4"){
            print'<div class="grid_video extra"><video controls class="videos"><source type="video/mp4"  src="' . $imageURL . '" alt="" nr="' . $imageID . '"></video></div>';
        }elseif($fileExtension == "MP4"){
            print'<div class="grid_video extra"><video controls class="videos"><source type="video/mp4"  src="' . $imageURL . '" alt="" nr="' . $imageID . '"></video></div>';
        }

    }

}
?>

如何解决此问题？

Answer 1

由于页面到达末尾，有时有时会命中两次，为避免使用setTimeout()，但在此之前必须clearTimeout(var);

Answer 2

您好，最初您需要获得总结果，然后，您需要计算总页数。例如有120个结果 12页，因为每个请求12个结果。因此，您总共只需要发送12个电话

在一个隐藏字段中将初始页设置为1。

当用户向下滚动到页面末尾

将页码增加1并更新隐藏的字段。

然后再次从隐藏字段中获取页码。

这是因为已经为下一个请求加载了12个结果，我们需要将结果从13转换为24。

下一步检查页码<=总页数；为了避免不必要的请求。

如果是，则发送请求不用了。

现在，用户在加载上一个请求之前向下滚动。页码增加，结果将正确加载。

尝试此算法。

Answer 3

我解决了这个问题。问题不在ajax调用中，而在SQL查询中。我对“ uploaded_on”进行了排序，而不对“ ID”进行了排序。上载器是多个，并且图像具有相同的日期和时间。

ajax调用给出重复的数据

3 个答案: