如何创建适用于无限滚动加载行为的方法查询

Question

我正在创建一个输出 1000-3000 条记录列表的页面。当前流程是：

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

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

我想做的是： 1. 用户加载页面 2. jQuery 命中服务器最多获取 100 条记录。然后继续循环访问服务器，直到加载的记录等于最大记录。

这里的想法是用户可以快速查看记录并且不会认为有什么问题。

所以它并不是真正的无限滚动，因为我不关心滚动位置，但它看起来像是一个类似的流程。

在 jQuery 中如何使服务器处于循环状态？考虑到偏移和限制，我如何在 Rails 中进行查询？

谢谢

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