AngularJS 即时搜索非常滞后

Question

我目前正在开发一个带有 Web 前端的数据库。在这个项目的早期版本中使用了 jQuery，我现在开始使用 AngularJS 来实现“即时搜索”功能，如下所示：

function SearchCtrl($scope, $http) {
    $scope.search = function() {  
    $scope.result = null;

    $http({method: 'GET', url: 'api/items/search/' + $scope.keywords }).
        success(function(data, status, headers, config) {
            $scope.result = data;
        }).
        error(function(data, status, headers, config) {
            $scope.status = status;
        });     
    };
}

...
<div id="searchControl" ng-controller="SearchCtrl">
    <form method="get" action="" class="searchForm">
        <input type="text" id="search" name="search" ng-model="keywords" ng-change="search()"/>
        <input type="submit" value="Search" />
    </form>
    <div ng-model="result">
        <a href="javascript:void(0)" ng-repeat="items in result.items" >
            <div class="card">
                <span ng-show="items.id"><b>Item ID: </b>{{items.id}}<br></span>
                <span ng-show="items.part_id"><b>Part ID: </b>{{items.part_id}}<br></span>
                <span ng-show="items.description"><b>Description: </b>{{items.description}}<br></span>
                <span ng-show="items.manufacturer"><b>Manufacturer: </b>{{items.manufacturer}}<br></span>
                <span ng-show="items.product_range"><b>Range: </b>{{items.product_range}}<br></span>
                <span ng-show="items.borrower"><b>Borrower: </b>{{items.borrower}}<br></span>
                <span ng-show="items.end_date"><b>End Date: </b>{{items.end_date}}<br></span>
            </div>
        </a>
    </div>
</div>
...

这很好用，但有一个问题：因为我在“ng-change”上调用搜索功能，所以在输入搜索词时非常滞后，有时会导致浏览器崩溃。在旧版本（使用 jQuery）上，我使用标志来测试是否有一个 get 请求已经在运行，如果有然后我在开始新的请求之前中止了它。我已经查看了 AngularJS 文档以中止获取请求，但仍然不明智。如果有人对如何实现此或其他修复有任何建议，我将不胜感激。

谢谢。

Answer 1

一旦发送了 get 请求，它就会被发送。 AFAIK，还没有一种方法可以中止处理 Angular 原生的 http 请求的结果。这是当前标记为“OPEN”的功能请求：https://github.com/angular/angular.js/issues/1159

也就是说，您可以像这样自己中止响应的处理：

var currentKey= 0;

$scope.test = function (){
   $http({ method: 'GET', url: 'test.json', key: ++currentKey })
      .success(function(data, status, headers, config) {
         if(config.key == currentKey) {
           //You're now inside your most recent call.
           $scope.foo = data;
         }
      });
};

另一方面，我建议对你的 on change 事件实施某种超时，以防止它过于“健谈”。

Answer 2

Angularjs 的去抖动/节流模型更新将对您的情况有所帮助：http://jsfiddle.net/lgersman/vPsGb/3/

示例中的指令将限制更改事件，以便执行较少的 ajax 请求。

没有什么比在 jsfiddle 代码中像这样使用指令了：

<input 
    type="text" 
    id="search" 
    name="search" 
    ng-model="keywords" 
    ng-change="search()"
    ng-ampere-debounce
/>

它基本上是一小段代码，由一个名为“ng-ampere-debounce”的单个角度指令组成，该指令利用http://benalman.com/projects/jquery-throttle-debounce-plugin/，可以附加到任何dom元素。该指令重新排序附加的事件处理程序，以便它可以控制何时限制事件。

您可以将其用于节流/去抖动 * 模型角度更新 * 角度事件处理程序 ng-[事件] * jquery 事件处理程序

看看：http://jsfiddle.net/lgersman/vPsGb/3/

该指令将成为 Orangevolt Ampere 框架 (https://github.com/lgersman/jquery.orangevolt-ampere) 的一部分。