0

我目前正在开发一个带有 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 文档以中止获取请求，但仍然不明智。如果有人对如何实现此或其他修复有任何建议，我将不胜感激。

谢谢。

4

2 回答 2

2

好吧，一旦发送了 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 事件上实现某种超时，以防止它过于“健谈”。

于 2013-02-07T13:06:42.103 回答
0

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-[event] * jquery 事件处理程序

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

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

于 2013-08-15T13:18:00.390 回答