AngularJS，多面搜索非常慢

Question

我在我的项目中使用了这个多面搜索https://plnkr.co/edit/wNbRidDCLmwIBWUOz5bz，但是有 430 个项目，过滤器计数器非常慢......当我使用搜索框时，我有输入延迟。

在 HTML 中：

({{ (filteredItems | filter:query | filter:count(group.name, facet)).length }})

在控制器中：

$scope.count = function (prop, value) {
    return function (el) {
        return el[prop] == value;
    };
};

你有其他选择吗？

Answer 1

我在这里分叉了你的小提琴：http://jsfiddle.net/ema7wpse/ 并解决了我上面提到的问题。我没有看到任何性能问题，但你原来的小提琴对我来说表现不错，所以你的里程可能会有所不同。

(function() {

  angular.module('myApp', []);

  var uniqueItems = function(data, key) {
    var result = [];

    for (var i = 0; i < data.length; i++) {
      var value = data[i][key];

      if (result.indexOf(value) == -1) {
        result.push(value);
      }

    }
    return result;
  };

   angular.module('myApp').controller("MyCtrl",MyCtrl)

  function MyCtrl($scope, filterFilter) {
    $scope.usePants = {};
    $scope.useShirts = {};
    $scope.useShoes = {};

    $scope.players = [{
      name: 'Bruce Wayne',
      shirt: 'XXL',
      pants: '42',
      shoes: '12'
    }, {
      name: 'Wayne Gretzky',
      shirt: 'XL',
      pants: '38',
      shoes: '10'
    }, {
      name: 'Michael Jordan',
      shirt: 'M',
      pants: '32',
      shoes: '9'
    }, {
      name: 'Rodman',
      shirt: 'XSXL',
      pants: '42',
      shoes: '11'
    }, {
      name: 'Jake Smitz',
      shirt: 'XXL',
      pants: '42',
      shoes: '12'
    }, {
      name: 'Will Will',
      shirt: 'XXLL',
      pants: '42',
      shoes: '12'
    }, {
      name: 'Youasdf Oukls',
      shirt: 'XL',
      pants: '38',
      shoes: '10'
    }, {
      name: 'Sam Sneed',
      shirt: 'XL',
      pants: '38',
      shoes: '10'
    }, {
      name: 'Bill Waxy',
      shirt: 'M',
      pants: '32',
      shoes: '9'
    }, {
      name: 'Javier Xavior',
      shirt: 'M',
      pants: '32',
      shoes: '9'
    }, {
      name: 'Bill Knight',
      shirt: 'M',
      pants: '32',
      shoes: '9'
    }, {
      name: 'One More',
      shirt: 'M',
      pants: '32',
      shoes: '9'
    }, {
      name: 'Player One',
      shirt: 'XXL',
      pants: '42',
      shoes: '11'
    }, {
      name: 'Space Cadet',
      shirt: 'XXL',
      pants: '42',
      shoes: '12'
    }, {
      name: 'Player Two',
      shirt: 'XXXXL',
      pants: '42',
      shoes: '12'
    } {
      name: 'Bill Knight',
      shirt: 'M',
      pants: '32',
      shoes: '9'
    }, {
      name: 'One More',
      shirt: 'M',
      pants: '32',
      shoes: '9'
    }, {
      name: 'Player One',
      shirt: 'XXL',
      pants: '42',
      shoes: '11'
    }, {
      name: 'Space Cadet',
      shirt: 'XXL',
      pants: '42',
      shoes: '12'
    }];

    // Watch the pants that are selected
    $scope.$watch(function() {
      return {
        players: $scope.players,
        usePants: $scope.usePants,
        useShirts: $scope.useShirts,
        useShoes: $scope.useShoes
      }
    }, function(value) {
      var selected;

      $scope.count = function(prop, value) {
        return function(el) {
          return el[prop] == value;
        };
      };

      $scope.pantsGroup = uniqueItems($scope.players, 'pants');
      var filterAfterPants = [];
      selected = false;
      for (var j in $scope.players) {
        var p = $scope.players[j];
        for (var i in $scope.usePants) {
          if ($scope.usePants[i]) {
            selected = true;
            if (i == p.pants) {
              filterAfterPants.push(p);
              break;
            }
          }
        }
      }
      if (!selected) {
        filterAfterPants = $scope.players;
      }

      $scope.shirtsGroup = uniqueItems($scope.players, 'shirt');
      var filterAfterShirts = [];
      selected = false;
      for (var j in filterAfterPants) {
        var p = filterAfterPants[j];
        for (var i in $scope.useShirts) {
          if ($scope.useShirts[i]) {
            selected = true;
            if (i == p.shirt) {
              filterAfterShirts.push(p);
              break;
            }
          }
        }
      }
      if (!selected) {
        filterAfterShirts = filterAfterPants;
      }

      $scope.shoesGroup = uniqueItems($scope.players, 'shoes');
      var filterAfterShoes = [];
      selected = false;
      for (var j in filterAfterShirts) {
        var p = filterAfterShirts[j];
        for (var i in $scope.useShoes) {
          if ($scope.useShoes[i]) {
            selected = true;
            if (i == p.shoes) {
              filterAfterShoes.push(p);
              break;
            }
          }
        }
      }
      if (!selected) {
        filterAfterShoes = filterAfterShirts;
      }

      $scope.filteredPlayers = filterAfterShoes;
    }, true);


    $scope.$watch('filtered', function(newValue) {
      if (angular.isArray(newValue)) {
        console.log(newValue.length);
      }
    }, true);
  }

  angular.module('myApp').filter('count', function() {
    return function(collection, key) {
      var out = "test";
      for (var i = 0; i < collection.length; i++) {
        //console.log(collection[i].pants);
        //var out = myApp.filter('filter')(collection[i].pants, "42", true);
      }
      return out;
    }
  });

  angular.module('myApp').filter('groupBy',
    function() {
      return function(collection, key) {
        if (collection === null) return;
        return uniqueItems(collection, key);
      };
    });

})();