Вызов ajax дает повторяющиеся данные

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

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

    }

}
?>

Как я могу исправить эту проблему?

Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Symfony Station Communiqué - 7 июля 2023 г
Symfony Station Communiqué - 7 июля 2023 г
Это коммюнике первоначально появилось на Symfony Station .
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Установка и настройка Nginx и PHP на Ubuntu-сервере
Установка и настройка Nginx и PHP на Ubuntu-сервере
В этот раз я сделаю руководство по установке и настройке nginx и php на Ubuntu OS.
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Как установить PHP на Mac
Как установить PHP на Mac
PHP - это популярный язык программирования, который используется для разработки веб-приложений. Если вы используете Mac и хотите разрабатывать...
0
0
391
3

Ответы 3

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

setTimeout () будет вызывать функцию каждые x мс. Не самое лучшее с точки зрения его потребностей. Он хочет знать, прокручивал ли кто-нибудь или нет

Dice 29.08.2018 20:37

это setInterval (), а не setTimeout (), что вызывает повторяющиеся вызовы после x времени

Waqar 29.08.2018 20:38

Оба могут использоваться одинаково, но вы правы, я запутался

Dice 29.08.2018 20:39

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

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

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

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

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

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

Затем проверьте номер страницы <= общее количество страниц; Чтобы избежать нежелательных запросов.

Если да, то отправьте запрос В противном случае оставьте это.

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

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

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

Другие вопросы по теме