Implement a delay on $scope.$watch

angularjs

Solution

Normally i'd say use angular's $timeout for this delay but you cant clear this timeout yet.

//EDIT:you can.

Set a timeout and clear it, if this watcher gets triggered fast enought.

Like this:

var timeoutCode;
var delayInMs = 2000;
$scope.$watch("query", function(query) {
 clearTimeout(timeoutCode);  //does nothing, if timeout alrdy done
 timeoutCode = setTimeout(function(){   //Set timeout
     $scope.loading = true;
     returnFactory.query(query).then(function(returns) {
       $scope.returns = returns;
       $scope.loading = false;
     });
 },delayInMs);
});

http://jsfiddle.net/4FuyY/

UPDATE Thanks to stewie this can be achieved with angular's $timeout.

    var timeoutPromise;
    var delayInMs = 2000;
    $scope.$watch("query", function(query) {
     $timeout.cancel(timeoutPromise);  //does nothing, if timeout alrdy done
     timeoutPromise = $timeout(function(){   //Set timeout
         $scope.loading = true;
         returnFactory.query(query).then(function (returns) {
           $scope.returns = returns;
           $scope.loading = false;
         });
     },delayInMs);
    });

Problem

I was wondering whether or not it is possible to implement a slight delay on $scope.$watch. I have the following which queries the server, so I'd like to implement a slight delay before it evaluates the `query` before querying the server. I've noticed that if you type to quickly it gets confused and doesn't send the correct information: ``` $scope.$watch("query", function () { $scope.loading = true; returnFactory.query($scope.query).then(function (returns) { $scope.returns = returns; $scope.loading = false; }); }); ```

Original source