Question

我有以下控制器

    var myApp = angular.module("MyApp", ["firebase"]);

    function MyController($scope, $firebase) {
    var rootRef = new Firebase("vivid-fire-447.firebaseio.com/products");
        // Automatically syncs everywhere in realtime
        $scope.products = $firebase(rootRef);
        $scope.products.$on('loaded', function(){
            var index = $scope.products.$getIndex();

            $scope.total = function(){
                var total = 0;

                index.forEach(function(i){
                    total += $scope.products.$child(i).price;
                });
                return total;
            };
        });

      }

以及以下html

<div ng-app="MyApp">

    <div ng-controller="MyController">
        <ul>
            <li ng-repeat="product in products | orderByPriority">{{product.code}}</li>
        </ul>
        <div>Total = {{total()}}</div>
    </div>

</div>

问题在于，当我显示产品的总价格时，Chrome cpu被固定在100％并且内存使用量开始迅速攀升，最终标签会挂起。

我注意到使用AngularJS Batarang，整个方法被称为continuosly？

如何以有效的方式获得所有产品的总价？

JsFiddle

Answer 1

我尝试了你的例子，它没有问题;它在不到1秒的时间内加载。我不认为上面显示的代码/数据准确地捕获了问题。但是，我确实注意到了一些潜在的问题。

$scope.getTotal的定义位于$scope.products的加载事件中，这意味着Angular第一次尝试编译此页面时可能存在该函数。你可以通过最初给它一个空数组并将它移出加载的回调来纠正它：

    $scope.products = $firebase(rootRef);
    var index = [];
    $scope.products.$on('loaded', function(){
        index = $scope.products.$getIndex();
    });
    $scope.total = function(){ /*...*/ }

代码通过调用$child为每条记录创建与Firebase的新同步连接。没有必要这样做，因为所有数据都已存在于父对象中。一般情况下，您不需要使用$child作为某些特殊用例：

total += $scope.products[key].price; // far more efficient!

这是展示变化的小提琴。在我的盒子上它加载的时间不到半秒，即使是小提琴包含代码的开销。

http://jsfiddle.net/katowulf/Q6VPx/

Firebase高内存和CPU使用率

1 个答案: