AngularJS-使用$ http和去抖动处理动态搜索

Question

I have a text input below, bound to a model req.mod1 , with a debounce delay in updating model, that calls a pullData() function.

<input type="text" class="form-control" ng-change="pullData()" ng-model-options="{debounce: 1000}" ng-model="req.mod1">

Inside of pullData() I have a simple $http.get request, that pulls data and updates some other fields in the form.

$scope.pullData = function(){
    var pullingData = true;
    if (!pullingData){
        $http.get('example.com/search/' + $scope.req.mod1 ).then(res)
            ...
            $scope.req.mod2 = res.data.mod2;
            $scope.req.mod3 = res.data.mod3;
            var pullingData = false;
            ...
    }
}

The problem that arises is that multiple calls stack on top of each other -- I think -- and so if a user happens to input text, wait >1second, and type some more, the call would go out with the first inputted text. Then it would pull the data and update the form with the first res . I'm trying to keep track of the request with a pullingData var.

Any ideas on how to handle a truly dynamic search call? Is there a way to cancel requests if a new one comes in? Or maybe just tell angular to constantly overwrite it?

Thanks in advance.

Answer 1

I think this is what you need http://odetocode.com/blogs/scott/archive/2014/04/24/canceling-http-requests-in-angularjs.aspx

When you create a request.. it's called Promise , so what you need to cancel is that.

Something like this:

app.factory("movies", function($http, $q){
    var getById = function(id){
        var canceller = $q.defer();
        var cancel = function(reason){
            canceller.resolve(reason);
        };
        var promise = $http.get("/api/movies/slow/" + id, { timeout: canceller.promise})
                .then(function(response){
                   return response.data;
                });
        return {
            promise: promise,
            cancel: cancel
        };
    };
    return {
        getById: getById
    };
});

Answer 2

When the user enters something to search, your app should always search by the user's input. It means that you shouldn't cancel the user's input.

For example, the user want to search something about 'starwar', when he/she enter 'star', and you get some result. If now you cancel the 'war' which is entered after, the result is not good. So just let Angular override the result.

Moreover, some errors in your example of code, when you call pullData , it never passes the if check:

$scope.pullData = function(){
    var pullingData = true;
    // !pullingData is always false
    if (!pullingData){
        $http.get('example.com/search/' + $scope.req.mod1 ).then(res)

    }
}