Throttling Input in AngularJs Applications using UnderscoreJs Debounce

</div>

The typical scenario is to watch the search text and react instantly. This method handles the filter:

var filterAction = function($scope) {
if (_.isEmpty($scope.searchText)) {
$scope.filteredList = $scope.list;
return;
}
var searchText = $scope.searchText.toLowerCase();
$scope.filteredList = _.filter($scope.list, function(item) {
return item.indexOf(searchText) !== -1;
});
};

The controller asks the scope to $watch like this:

$scope.$watch(‘searchText’, function(){filterAction($scope);});

This will fire every time you type. To settle things down, use the built-in debounce function that comes with UnderscoreJs. The function is simple: pass it a function to debounce with a time in milliseconds. It will delay actually calling the function you pass until at least the time delay has passed since the last time it was passed. In other words, if we use 1 second (which I did in this example to exaggerate the effect) and the function is called repeatedly as I’m typing in the search box, it will not actually fire until I stop typing and wait for at least 1 second.

You may be tempted to simply debounce the filter action like this:

var filterThrottled = _.debounce(filterAction, 1000);
$scope.$watch(‘searchText’, function(){filterThrottled($scope);});

However, this poses a problem. The debounce uses a timer, which ends up outside of Angular’s digest loop, so nothing will be reflected in the UI because Angular doesn’t know about it. Instead, you must wrap it in a call to $apply:

var filterDelayed = function($scope) {
$scope.$apply(function(){filterAction($scope);});
};

Then you can watch it and only react once the input settles:

var filterThrottled = _.debounce(filterDelayed, 1000);
$scope.$watch(‘searchText’, function(){filterThrottled($scope);});

Of course the full example provides a throttle so you can see the difference between the “instant” filtering and the delayed filtering. The fiddle for this again is online at: http://jsfiddle.net/nZdgm/

Enjoy!