2

Внедрил Infinite Scroll на своем сайте для просмотра товаров. Вроде все работает, но при быстром скролле загружаются повторные товары и т. д. При медленном же все работает. Можно ли сделать так, чтобы запрос отправлялся скажем каждые две секунды? Поставить задержку в двух словах. Страница: https://stockup.az/browse. Вот код:

var start = 0;
var limit = 4;
var reachedMax = false;

$(window).scroll(function () {
    var md = $(document).height() - $(window).height() - $('footer').height() - 80;
    if ($(window).scrollTop() > md)
        getData();
});

$(document).ready(function () {
    getData();
});

И функция getData()

function getData() {
if (reachedMax)
    return;

$.ajax({
    url: '../pages/data.php',
    method: 'POST',
    dataType: 'text',
    data: {
        getData: 1,
        start: start,
        limit: limit
    },
    success: function(response) {
        if (response == "reachedMax")
            reachedMax = true;
        else {
            start += limit;
            $(".results").append(response);
        }
    }
});

}

1 ответ 1

1

Вы можете завести глобальный флаг allowLoading, который будет устанавливаться в false при начале загрузки и в true при ответе сервера. Заодно это даст возможность избавиться от переменной reachedMax:

var start = 0;
var limit = 4;
var allowLoading = true;

$(window).scroll(function () {
    var md = $(document).height() - $(window).height() - $('footer').height() - 80;
    if ($(window).scrollTop() > md)
        getData();
});

$(document).ready(function () {
    getData();
});

function getData() {
    if(!allowLoading) {
        return;
    }

    $.ajax({
        url: '../pages/data.php',
        method: 'POST',
        dataType: 'text',
        data: {
            getData: 1,
            start: start,
            limit: limit
        },
        success: function(response) {
            if (response == "reachedMax") {
                allowLoading = false;
            } else {
                start += limit;
                $(".results").append(response);
                allowLoading = true;
            }
        },
        error: function() {
            // На случай если произошла ошибка сети
            allowLoading = true;
        }
    });
}
4
  • Не сработало, после этого вообще перестало что либо показываться 18 июл 2018 в 16:56
  • Собрал тестовый кейс — работает корректно. Вы точно всё перенесли из моего примера? 18 июл 2018 в 17:25
  • Да, скопировал. Еще есть файл data.php, если поможет, могу скинуть. 18 июл 2018 в 17:28
  • drive.google.com/file/d/1jZUGrtzGRBDyt5zt1fTu7XKHJ1HlOP3X/… — загрузил тестовый кейс архивом. data.php (изменил путь к нему в js, также удалил расчёт высоты футера, тк его нет на странице) просто возвращает рандомное число и добавляет в конец .results 18 июл 2018 в 17:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.