вызов ajax дает дубликаты данных

Question

С помощью jquery я создал вызов ajax. Я использую метод GET, чтобы получить данные из базы данных с изображениями. Этот вызов ajax запускается функцией прокрутки. Если пользователь достиг дна, активируйте вызов ajax. Первый вызов ajax активируется, если документ готов и загружает 24 строки После этого я использую функцию прокрутки и загружаю 12 строк каждый раз, когда пользователь прокручивает вниз.

Иногда скрипт загружает 2 одинаковых изображения с одинаковым идентификатором. Это дублируется, но я не могу найти проблему. Я пробовал разные вещи, чтобы остановить функцию de scroll, если запущен вызов ajax, и активировать функцию 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

Привет, сначала нужно получить общий результат, Затем вам нужно рассчитать общее количество страниц. Например Есть 120 результатов 12 страниц, потому что 12 результатов на запрос. Таким образом, всего вам нужно отправить только 12 звонков

Установить начальную страницу как 1 в одном скрытом поле.

Когда пользователь прокручивает страницу вниз до конца

Увеличить номер страницы на 1 и обновить скрытое поле.

Затем снова получите номер страницы из скрытого поля.

Это потому, что для следующего запроса уже загружено 12 результатов, нам нужно получить результат с 13 до 24.

Следующая проверка номера страницы <= общее количество страниц; Чтобы избежать нежелательных запросов с. </p>

Если да, то отправить запрос Остальное оставь.

Теперь пользователь прокручивает страницу вниз перед загрузкой предыдущего запроса. Номер страницы увеличивается, и результаты будут правильно загружаться.

Попробуйте этот алгоритм.

Answer 2

Я решил проблему. Проблема была не в вызове ajax, а в запросе SQL. Я отсортировал по "uploaded_on", а не по "ID". Загрузчик несколько, и изображения имеют одинаковую дату и время.

Answer 3

Поскольку страница достигает конца, а иногда и дважды, поэтому, чтобы избежать, вам следует использовать setTimeout(), но перед этим вы должны clearTimeout(var);