AngularJS: $watch with debounce

Question

I have the following html which represents a search field:

<input ng-model-options="{ debounce: 500 }" type="text" ng-model="name">

And the following js:

$scope.$watch('name', function(newVal, oldVal) {
            if(newVal != oldVal) {
                $scope.pageChanged($scope.sort, $scope.name, $scope.sortDirection);
            }
        });

Now, my pageChanged function makes a REST call to my server and returns a list of entites based on the sort and search information (the "name"). Say that my user wants to search for a "Tom". I would like to avoid my application making three rest calls (name="T", name="To", name="Tom").

I tried doing this with debounce, but it seems that watch doesn't work with debounce so I was wondering what would be the best way to implement this with minimal code?

have you tried to make a call only when there is 3 or more characters? — maurycy, Apr 21 '15 at 11:37
Your code is fine, just make sure Angular is 1.3.x version http://plnkr.co/edit/ttIgZCxtgJq5DSmrgCl8?p=preview — dfsq, Apr 21 '15 at 11:47
Ah, my mistake, I had an older bower config where angular was set at 1.2. Setting it to 1.3 and updating made my code work. Could you move it to an answer so that I can mark it? — NLuburić, Apr 21 '15 at 13:30

score 9 · Answer 1 · answered Apr 21 '15 at 11:44

You should be using ng-change for this sort of thing instead of wiring up a watch.

<input ng-model-options="{ debounce: 500 }" type="text" ng-model="name" ng-change="modelChanged()">

JS:

var timeout = $timeout(function(){});

$scope.modelChanged = function(){
    $timeout.cancel(timeout); //cancel the last timeout
    timeout = $timeout(function(){
        $scope.pageChanged($scope.sort, $scope.name, $scope.sortDirection);
    }, 500);
};

I'm unfamiliar with debounce, but it might achieve the same thing.

+1 ! Debounce is just a term to describe what you're doing. Nice! (Lots of libraries out there - https://www.npmjs.com/search?q=debounce) — Nick Grealy, Jan 24 '18 at 05:45

score 3 · Answer 2 · edited May 23 '17 at 12:13

Very interesting Use Case!

Solution:

I solved a similar issue by implementing the debounce function in a service taking inspiration from lodash' implementation (also can find an implementation here (@Pete BD's answer).

// Create an AngularJS service called debounce
app.factory('debounce', ['$timeout','$q', function($timeout, $q) {
  // The service is actually this function, which we call with the func
  // that should be debounced and how long to wait in between calls
  return function debounce(func, wait, immediate) {
    var timeout;
    // Create a deferred object that will be resolved when we need to
    // actually call the func
    var deferred = $q.defer();
    return function() {
      var context = this, args = arguments;
      var later = function() {
        timeout = null;
        if(!immediate) {
          deferred.resolve(func.apply(context, args));
          deferred = $q.defer();
        }
      };
      var callNow = immediate && !timeout;
      if ( timeout ) {
        $timeout.cancel(timeout);
      }
      timeout = $timeout(later, wait);
      if (callNow) {
        deferred.resolve(func.apply(context,args));
        deferred = $q.defer();
      }
      return deferred.promise;
    };
  };
}]);

Then I included it in my controller/directive containing the $watch and then doing the magic like so (using your code):

$scope.$watch('name', debounce(function(newVal, oldVal) {
   if(newVal != oldVal) {
     $scope.pageChanged($scope.sort, $scope.name, $scope.sortDirection);
   }
}, 500));

DONE!

Case history:

I also tried to do like:

$scope.$watch('name', function(newVal, oldVal) {

   debounce(function() {
     if(newVal != oldVal) {
       $scope.pageChanged($scope.sort, $scope.name, $scope.sortDirection);
     },500)();
});

but without satisfaction because the watch was run twice in 50ms.

AngularJS: $watch with debounce

2 Answers2

Linked