轨道上的红宝石 - 如何创建适用于无限滚动加载行为的方法查询

Question

我正在创建一个输出 1000-3000 条记录列表的页面。电流为：

1. 用户加载页面
2. jQuery访问服务器以获取所有记录并将它们注入页面。

这里的问题是，某些用户的这些记录可能需要 3+ 秒才能返回，这是一个可怕的用户体验。

我想做的是：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。

或者您的服务器需要获取所有数据。将其存储在某个地方，然后返回数据块以及某种唯一 id 或 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);