Я пытаюсь создать страницу с бесконечной прокруткой, содержащую сообщения. У меня есть этот HTML-код:

<div class="content">
<div class="c" id="adata">
<!-- the posts goes here -->
</div>
<div class="card" id="scroll-to">
<div class="ajax-load text-center" style="display:none">
<p><img src="/img/loader.gif">Loading More post</p>
</div></div>
</div>

Когда пользователь прокручивает div с помощью id="scroll-to". Я создал ajax-вызов кода, который автоматически добавляет данные в div, у которых есть id="adata".

Чтобы создать вызов ajax, я использовал код jquery следующим образом:

$(window).scroll(function() {
   var hT = $('#scroll-to').offset().top,
       hH = $('#scroll-to').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
   if (wS > (hT+hH-wH)){
            var last_id = $(".box:last").attr("id");
                    $('.ajax-load').show();
            loadMoreData(last_id);
        }
    });

    function loadMoreData(last_id){
      $.ajax(
            {
                url: '/loadMoreData.php?last_id=' + last_id,
                type: "get",
            })
            .done(function(data)
            {
                if(data.html == " "){
                    $('.ajax-load').html("No more records found");
                    return;
                }
                $('.ajax-load').hide();
                $('#adata').append(data);
            })
            .fail(function(jqXHR, ajaxOptions, thrownError)
            {
                  alert('server not responding...');
            });
    }

Но всякий раз, когда пользователь прокручивает div с помощью id="scroll-to", приведенный выше код jquery создает несколько вызовов ajax в одном / единственном экземпляре URL-адреса /loadMoreData.php?last_id=' + last_id с заменой last_id в качестве идентификатора последний пост.

Предположим, что идентификатор последнего сообщения - 2177, код jquery создает несколько запросов ajax к URL-адресу /loadMoreData.php?last_id=2177, что на самом деле не должно быть более одного раза, и, похоже, вы не можете понять, почему?

Из-за множества запросов с одинаковым last_id сообщения повторяются. Какое идеальное решение этой проблемы?

Чтобы лучше понять проблему, вы можете посетить http://funpd.com/index1.

0
priya verma 13 Мар 2018 в 11:13

2 ответа

Лучший ответ

Вам необходимо реализовать своего рода «сторожевой таймер» для ваших запросов - создать логическую переменную и проверять ее, когда вы собираетесь выполнить запрос, простой пример:

var isDownloading = false;

function loadMoreData(last_id) {
    if (isDownloading) return;
    isDownloading = true;
    $.ajax({
        url: '/loadMoreData.php?last_id=' + last_id,
        type: "get",
    }).done(function(data) {
        isDownloading = false;
        if (data.html == " ") {
            $('.ajax-load').html("No more records found");
            return;
        }
        $('.ajax-load').hide();
        $('#adata').append(data);
    }).fail(function(jqXHR, ajaxOptions, thrownError) {
        isDownloading = false;
        alert('server not responding...');
    });
}
2
stetoc 13 Мар 2018 в 08:18

Это похоже на ожидаемое поведение, поскольку страница по-прежнему будет прокручиваться до уровня ниже достигнутых вами div. AJAX не будет завершен и, следовательно, добавит html мгновенно.

Поместите оператор if перед loadMoreData, проверяя, загружается ли ajax, например, сбросьте проверку var на done.

1
ikdekker 13 Мар 2018 в 08:18