Как создать запрос метода, который работает для поведения загрузки Infinite Scroll

Question

Я создаю страницу, которая выводит список из 1000-3000 записей.Текущий поток:

1. Пользователь загружает страницу
2. jQuery обращается к серверу для всех записей и вставляет их в страницу.

Проблема здесьто, что эти записи для некоторых пользователей могут возвращаться в течение 3+ секунд, что является ужасным UX.

Я хотел бы сделать следующее: 1. Пользователь загружает страницу 2. jQuery обращается к серверу и получаетмаксимум 100 записей.Затем продолжайте работать с сервером в цикле, пока загруженные записи не будут равны максимальному количеству записей.

Идея в том, что пользователь получает возможность быстро просматривать записи и не думает, что что-то не работает.на самом деле это бесконечная прокрутка, так как меня не волнует положение прокрутки, но похоже, что это похожий поток.

Как в jQuery я могу запустить сервер в цикле?А как в рельсах можно делать запросы с учетом смещения и лимита?

Спасибо

Answer 1

Вы можете просто запросить у сервера пакет данных снова и снова.

Существует множество API, которые вы можете реализовать. Как:

client: GET request /url/
server: {
    data: [ ... ]
    rest: resturl
}
client GET request resturl
repeat.

Или вы можете заставить клиента передавать параметры, говоря, что вы хотите ресурс 1-100, затем 101-200, и делать это в цикле.

Все время вы будете отображать данные по мере их поступления.

Ваш сервер также должен позволить вам передать параметры, говорящие о том, что вы хотите записать i в i + n.

Или ваш сервер должен получить все данные. Сохраните его где-нибудь, затем верните порцию данных вместе с каким-то уникальным идентификатором или URL, чтобы запросить другую порцию данных, и повторите это.

// pseudo jquery code
function next(data) {
    render(data.records);
    $.when(getData(data.uniqueId)).then(next);
}

function getData(id) {
    return $.ajax({
        type: "GET",
        url: ...
        data {
            // when id is undefined get server to load all data
            // when id is defined get server to send subset of data stored @ id.
            id: id
        },
        ...
    });
}

$.when(getData()).then(next);