如何在我的 Firebase 无限滚动中按时间顺序正确排序数据？答案

【问题标题】：How to properly order data chronologically in my Firebase infinite scroll?如何在我的 Firebase 无限滚动中按时间顺序正确排序数据？
【发布时间】：2017-05-10 10:45:36
【问题描述】：

代码：

<script>

    var app = angular.module('app', ['firebase']);

    app.controller('ctrl', function ($scope, $firebaseArray, $timeout) {


            console.log(<%=lastID%>);

            $scope.data = [];
            var _n = Math.ceil(($(window).height() - 50) / (350)) + 1;
            var _start = <%= lastID %>;
            var _end = <%= lastID %> + _n - 1;

            $scope.getDataset = function() {

                fb.orderByChild('id').startAt(_start).endAt(_end).limitToLast(_n).on("child_added", function(dataSnapshot) {

                    $scope.data.push(dataSnapshot.val());
                    $scope.$apply()
                    console.log("THE VALUE:"+$scope.data);

                });

                _start = _start + _n;
                _end = _end + _n;

            };


            $scope.getDataset();

            window.addEventListener('scroll', function() {
                 if (window.scrollY === document.body.scrollHeight - window.innerHeight) {
                      $scope.$apply($scope.getDataset());
                 } 
            });

    });

    // Compile the whole <body> with the angular module named "app"
    angular.bootstrap(document.body, ['app']);


</script>

情况：

lastID 是最后创建的帖子的 ID。它们倒退（从 -1 到 lastID）。

此解决方案完美运行，除非删除某些帖子。

（帖子按从最新到最旧的顺序排列（从 lastID 到 -1））。

例如，如果有 16 个帖子，lastID = -16。

如果我删除帖子 -13 到 -5 和帖子 -3，lastID 将保持在 -16。

这意味着当页面加载时，在加载前 3 个帖子（-16 到 -14）后没有帖子出现，我需要反复向下滚动才能显示帖子 -4。

问题：

我如何确保如果某些帖子被删除，我的无限滚动脚本将跳过不存在的帖子的 id 并仅加载 3 个最近的帖子？

我检查了什么：

我看了这个：

Display posts in descending posted order

但我不确定如何在无限滚动中实现这些解决方案。有什么想法吗？

【问题讨论】：

标签： javascript node.js firebase firebase-realtime-database

【解决方案1】：

如果我理解正确，您不必使用 end。这可以使用 startAt + limit 来实现

fb.orderByChild('id').startAt(_start).limit(n)...

并使用布局以降序排列项目。使用它，如果它们是连续的，您不必担心 id 的序列

更新

您可以更简单地执行此操作。只需使用最新值更新您的起点

fb.orderByChild('id').startAt(_start).limit(_n).on("child_added", function(dataSnapshot) {

    $scope.data.push(dataSnapshot.val());
    $scope.$apply()
    _start = dataSnapshot.child('id').val()
    console.log("THE VALUE:"+$scope.data);

});

在这种情况下，您的 _start 将始终保留最后一个 id，您不必担心被删除的元素。或者，您可以使用临时变量来存储最后一个 id 值并在 startAt 中使用它

【讨论】：

你的推理是合理的，如果我在 -1 到 -6 的列表中删除 -2、-3 和 -5，这三个项目就会被加载。问题是：由于我们删除了 endAt()，我可以再次滚动，然后再次加载 -2 和 -3。实际上，lastID = -6 表示第一组数据，但 lastID = -3 表示第一次滚动，last ID = 0 表示第二次滚动。
我需要获取最后一个加载项的 ID 并将 _start 设置为该 ID。但是如何在我的 firebase order 函数中选择最后一个项目？
插入到 startAt 的 _start 将从上一个查询中获取您最后加载的帖子......这很糟糕:(

【解决方案2】：

基本上，保存在 Firebase 中的所有数据都是按时间顺序排列的，因为每条记录的自动生成的 id 都是基于时间戳的。因此，您不需要订购您的价值观。只需确保您在保存在 Firebase 中的键值对中添加新 id。

如果您想反转列表的顺序（使最近的记录显示在顶部），您需要在阅读后反转列表。

编辑

如果你想得到你的记录在数据库中的位置，你可以使用类似下面的东西：

var ref = new Firebase("https://dinosaur-facts.firebaseio.com/dinosaurs");
ref.orderByKey().on("child_added", function(snapshot) {
  console.log(snapshot.key() + " was " + snapshot.val().height + " meters tall");
});

您可以找到更多关于订购here的信息。

【讨论】：

我理解您的推理并且我已经考虑过了，但是使用此解决方案的答案使用的代码比我目前使用的要多。除了不必在数据库中的帖子中存储额外的 ID 之外，我没有看到太多好处。还是我不知道这种方法有什么重要的好处？
您不需要存储 id，因为这些是自动生成的，这已经是一个优点。您需要做的就是在插入记录时添加以下代码行：var newPostRef = postsRef.push(); 这将自动生成一个基于您当前时间戳的 id。
我知道^^。但这真的是该解决方案的唯一优势吗？
但是有了 ID，我有优势知道哪个帖子是第 n 个帖子 :) 这对营销活动有好处！
你没有使用密钥，你在代码中使用了一个属性，就像我一样。

【解决方案3】：

startAt 和 limitToFirst 可用于检索下一篇文章。

只需告诉 firebase 在上次加载帖子的id 之后启动（在这种情况下为start + 1），删除的id 将被自动跳过。

var itemsPerScroll = 1;
$scope.getDataset = function() {
  var start = $scope.data.slice(-1)[0].id
  fb.orderByChild('id').startAt(start + 1).limitToFirst(itemsPerScroll)
  .on("child_added", function(dataSnapshot) {
    $scope.data.push(dataSnapshot.val());
    $scope.$apply()
  })
}

【讨论】：