javascript - "pause"和 "resume"ng-repeat

Question

不太确定如何提出这个问题，甚至不确定如何搜索它。我有一个实时照片/文本流推送到一个数组，所以我的页面不断有信息传入。所以我的页面不断以相当快的速度接收新信息。我想知道如何或如何在线搜索以本质上“暂停”和“恢复”ng-repeat，同时仍然保留推送到数组的信息，以便出现诸如“10 张新照片”之类的计数器和按钮。我意识到这可能是一个负载问题，但为了保持“简单”，我只想知道如何暂停 ng-repeat。

Answer 1

您可以将数组分成两部分。

$scope.items = []; //the visible model would be here
$scope.queue = []; //the pending-to-show elements are here

我们假设，当出现一张新照片时，它会被推送，调用以下函数(我不知道您拥有的实际事件处理程序是什么，所以请接受此代码):

$scope.onReceiveItem = function(item)
{
    $scope.queue.push(item);
}
$scope.loadmore = function()
{
    Array.prototype.push.apply($scope.items, $scope.queue.splice(0, 10));
}

使用此代码，您正在执行的操作:

1. 您的 onReceiveItem 将推送到队列中，而不是推送到实际的可显示数组中。
2. loadmore 是您对“10 个以上项目”的调用。将从队列开头取出 10 个元素，并通过推送将它们附加到实际数组。

或者如果您想根据暂停功能执行此操作，您可以:

$scope.onReceiveItem = function(item)
{
    if ($scope.pause) {
        $scope.queue.push(item);
    } else {
        if ($scope.queue.length) {
            //resuming queued items when unpaused and new items arrive
            Array.prototype.push.apply($scope.items, $scope.queue.splice(0, $scope.queue.length));
        }
        $scope.items.push(item);
    }
}

其他功能是相同的。

免责声明:我不知道你如何获取数据，所以我只是给你函数。它们位于 $scope 中，但根据您的情况，可能不需要。

一般良好实践:几乎 100% 安全地假设 items 数组在更改时会将其值反射(reflect)到 View 中，就像 $digest 一样/$apply 过程是纯粹的魔法。对于最常见的情况，最好不要依赖此类内部结构。如果你想要“活数据”和“死数据”，你应该有两种不同的数据结构；问问自己“哪些数据是实时的，哪些数据不是？”你将有两个数据集。 $scope.queue 根本不需要位于 $scope 中 - 为了清楚起见，我将其放在那里 - 而只是同一词法范围内的可访问标识符(注意我在这里没有使用$，因为我正在谈论编程概念)，就像同一个 Controller 中的varqueue = [];。