Баг при быстром прокручивании Infinite scroll

246

13 сентября 2018, 09:00

Внедрил 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);
        }
    }
});

}

Answer 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;
        }
    });
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

PhpQuery, как бороться с пробелами при выводе?

Есть сайт, с которого я, с помощью библиотеки phpQuery, тащу артикул и ценуМоя строка кода, которая вытаскивает нужную цену:

252

PHP

PHP достать не уникальные параметры из XML

Не получается достать не уникальные записи из XML файла, такое как "name" и "price" могу достать, а данные с "param" никак не получается, в чем моя ошибка?...

238

PHP