angularjs - Angular ui-grid/ng-grid 过滤器更改触发过于频繁

Question

我正在尝试使用服务器端排序、服务器端分页和服务器端过滤来实现 Angular 网格。使用 ui-grid (不稳定)，我添加了 ui.grid.paging 并让一切正常运行。非常好，向开发者致敬。

但是...... $scope.gridApi.core.on.filterChanged 会在按下每个键时触发，因此当我在给定名称列中搜索“Patrick”时，会触发七个事件，并且七个获取请求会到达我的服务器。更糟糕的是，由于我正在过滤一个大集合，因此此操作非常昂贵，而且结果甚至会相互超越，例如最具体的过滤器获得最快的结果，在处理不太具体的结果之前触发成功。

我想放慢速度，就像“进入停止后着火”。我对 javascript 和 REST 还很陌生，这是我的第一个真实项目。我真的很感激任何如何处理这个问题的想法。这感觉像是一个常见的场景，因此我可能缺少一些标准解决方案或最佳实践。

你的，帕特里克。

Answer 1

如果你想“全 Angular ”，我建议在 on.filterChanged 事件处理程序中使用 $timeout :

if (angular.isDefined($scope.filterTimeout)) {
    $timeout.cancel($scope.filterTimeout);
}
$scope.filterTimeout = $timeout(function () {
    getPage();
}, 500);

其中 500 是您希望在前往服务器之前在每个 on.filterChanged 事件之间等待的时间(以毫秒为单位)，而 getPage() 是实际前往服务器并检索数据的函数。

不要忘记取消 Controller “destroy”事件上的 $timeout:

$scope.$on("$destroy", function (event) {
    if (angular.isDefined($scope.filterTimeout)) {
        $timeout.cancel($scope.filterTimeout);
    }
});