与NG-变化角JS停止previous http请求 [英] Angular js stop previous http request with ng-change

问题描述

想实现具有角JS一个搜索字段。

Trying to implement a search field with angular js.

每当输入值的变化，它会调用一个方法来获取查询结果。

Everytime the input value changes, it will call a method to fetch the query results.

不过它很慢，因为每一个字符，这将再次调用该方法。我输入搜索框，如下

However its very slow because for every char, it will call the method once. My input search box as below

<input type="text" name="term" ng-model="term" ng-change="run_filter()"/>

我的功能

$scope.do_filter = function() {
    $scope.items = [];
    var canceler;
    term = $scope.term;
    if (canceler) canceler.resolve();
    canceler = $q.defer();
    $http({
        method: 'GET',
        url: '/search/do_search',
        params: {
            term: term
        },
        timeout: canceler.promise
    }).success(function(result) {
        if (result.items != null) {
            $scope.items = result.items;
            $scope.success = true;
        } else {
            $scope.success = false;
        }
        $scope.loading = false;
    });
}

但它似乎没有工作。当我看网络，第二请求提交后第一个请求没有被取消。

But it doesnt seem to work. When I look at the network, the first request is not cancelled when the second request is submitted.

在此先感谢您的帮助。

推荐答案

看一看由@Doug读该真棒指令，它增加了一个延迟NG-变化。

Have a look at this awesome directive by @Doug R which adds a delay to ng-change.

这完全救了我的一天，因为我们在我的办公室有一些非常快typers。
这只会一定量的打字活动后火（300 - 500毫秒与一个好的开始值）

This totally saved my day because we have some very fast typers at my office. This will only fire after a certain amount of typing inactivity (300 - 500ms are a good value to start with)

<一个href=\"http://stackoverflow.com/questions/21121460/angular-directive-encapsulating-a-delay-for-ng-change/21420441#comment33368400_21420441\">Delayed NG-变化

另一种方法是将与纳克模糊反应或迫使用户preSS返回到更新列表。

Another way would be to react with ng-blur or force the user to press RETURN to update the list.

这篇关于与NG-变化角JS停止previous http请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！