debounce not firing inside $scope.$watch

Question

I'm trying to run a function when a model variable updates in my UI but I'm also trying to throttle how often the function is executed via a debounce as the requested function fires an AJAX call. However the debounce function below just doesn't seem to be firing at all.

I originally wrote my own debounce service and have resorted to using underscores debounce method to test whether what I wrote was incorrect or not but it turns out Angular just isn't liking something below...

Using Angular's ng-model-option debounce method in the HTML is not an option.

$scope.$watch('filters.monthlyCost', function () {

    _.debounce(function () {
        console.log('lol');
    }, 1000);

});

There are no console errors, console.log('lol') just never happens.

Note: $watch does execute.

You should be using model options if you want to watch on debounce, otherwise it will always fire every time the model changes even with underscore debounce. https://docs.angularjs.org/api/ng/directive/ngModelOptions — Ed Knowles, Jun 04 '15 at 17:40

PSL · Accepted Answer · 2015-06-04T17:40:51.037

1

Since debounce returns a function ((Function): Returns the new debounced function.) that return value of debounce needs to be executed,

i.e example:

_.debounce(function () {
        console.log('lol');
    }, 1000)();

You could do:

$scope.$watch('monthlyCost', _.debounce(function() {
        console.log('lol');
    }, 1000));

edited Jun 04 '15 at 17:40

answered Jun 04 '15 at 17:34

PSL

123,204
21
253
243

score 0 · Answer 2 · answered Jun 04 '15 at 17:33

As I under stand from the docs of _.debounce (not tested)

$scope.$watch('filters.monthlyCost', function () {

    var logConsole = _.debounce(function () {
        console.log('lol');
        }, 1000);
    logConsole();

});

With your code, you are only registering a debounce function but it will not execute.

debounce not firing inside $scope.$watch

2 Answers2