Блог

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

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

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

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

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

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

Как в jQuery я могу запустить сервер в цикле? И как в rails я могу запрашивать с учетом смещения и ограничения?

Спасибо

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

Существует множество 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);