Make $debounce service part of angular !?

[honzajde]

I am simply watching some objects on my scope that are changed as part of several digest cycles. After digesting them (changing their values via databinding) has finished, I want to save them to databse, but only ONCE and that is the point of the $debounce service.

From asking this question on SO, http://stackoverflow.com/questions/16278216/angularjs-save-changes-after-digest-has-finished, I didn't see that this common use-case that will once arise for anyone doing something more complex, is clearly solved.

So I came with this:

/**
 * Service function that helps to avoid multiple calls of a function (typically save()) during angular digest cycle.
 * $apply will be called after original function returns;
 *
 * Use it like this:
 *
 *  $scope.$watch('order', function(newOrder){
 *     $scope.orderRules.apply(newOrder); // changing properties on order
 *   }, true);
 *
 *  $scope.$watch('order.valid', function(newOrder){
 *     $scope.save(newOrder); //will be called multiple times while digested by angular
 *   });
 *
 *  $scope.save = debounce(function(order){
 *     // POST your order here ...$http....
 *     // debounce() will make sure save() will be called only once
 *   });
 */
define(['app'], function (app) {
    app.factory('debounce', ['$timeout', function ($timeout) {
        return function(fn, timeout, apply){ // debounce fn
            timeout = angular.isUndefined(timeout) ? 0 : timeout;
            apply = angular.isUndefined(apply) ? true : apply; // !!default is true! most suitable to my experience
            var nthCall = 0;
            return function(){ // intercepting fn
                var that = this;
                var argz = arguments;
                nthCall++;
                var later = (function(version){
                    return function(){
                        if (version === nthCall){
                            return fn.apply(that, argz);
                        }
                    };
                })(nthCall);
                return $timeout(later, timeout, apply);
            };
        };
    }]);
});

Question 1 to you: Do you see the need for such service?
Question 2 to you: Is this the optimal solution?

[MikeMcElroy]

Is it best practice to save to your back-end whenever a $watch is triggered
(whenever the item changes), or to have the user complete an action before
transmitting that data over the wire? (eg. an ng-click on a "Save" icon or
button)

On Fri, May 17, 2013 at 10:07 AM, honza notifications@github.com wrote:

I am simply watching some objects on my scope that are changed as part of
several digest cycles. After digesting them (changing their values via
databinding) has finished, I want to save them to databse, but only ONCE
and that is the point of the $debounce service.

From asking this question on SO,
http://stackoverflow.com/questions/16278216/angularjs-save-changes-after-digest-has-finished,
I didn't see that this common use-case that will once arise for anyone
doing something more complex, is clearly solved.

So I came with this:

/** * Service function that helps to avoid multiple calls of a function (typically save()) during angular digest cycle. * $apply will be called after original function returns; * * Use it like this: * * $scope.$watch('order', function(newOrder){ * $scope.orderRules.apply(newOrder); // changing properties on order * }, true); * * $scope.$watch('order.valid', function(newOrder){ * $scope.save(newOrder); //will be called multiple times while digested by angular * }); * * $scope.save = debounce(function(order){ * // POST your order here ...$http.... * // debounce() will make sure save() will be called only once * }); */define(['app'], function (app) {
app.factory('debounce', ['$timeout', function ($timeout) {
return function(fn, timeout, apply){ // debounce fn
timeout = angular.isUndefined(timeout) ? 0 : timeout;
apply = angular.isUndefined(apply) ? true : apply; // !!default is true! most suitable to my experience
var nthCall = 0;
return function(){ // intercepting fn
var that = this;
var argz = arguments;
nthCall++;
var later = (function(version){
return function(){
if (version === nthCall){
return fn.apply(that, argz);
}
};
})(nthCall);
return $timeout(later, timeout, apply);
};
};
}]);});

Question 1 to you: Do you see the need for such service?
Question 2 to you: Is this the optimal solution?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/2690
.

[kstep]

@MikeMcElroy I can see reasons for both behaviors, and both of them can be named "best practices" depending on application being implemented. I think developer should have an option here (as well as customer at the end, as he pairs the money).

[pstadler]

👍

Great for delaying AJAX requests on input changes for features like autocomplete and suggestions.

[lrlopez]

@pstadler, I proposed in PR #2129 a way to extend $timeout with a debounce feature. It is used to implement delayed model updates on input controls. That may be useful for your use-case...

[pstadler]

@lrlopez I first met the concept in bacon.js. I'm new to the angular circus and was really wondering that there's no debounce feature built-in (e.g. alongside $timeout).
About #2129: I don't yet have the experience to figure out what negative impact the delaying of model updates might has.

[lrlopez]

Shouldn't be much of an issue if you're careful (i.e. don't allow submitting instantly unless you also specify submit as an update model event with 0 delay).

The idea behind delaying the model update is that any watch you bind to it will be called only once even if there are lots of changes in a row. If you use the model for filtering or for making AJAX requests, load will be reduced.

You could also attach a database save to a model watch to achieve the same behaviour exposed in the first post.

[cm325]

👍

[ThomasWeiser]

+1

[thatmarvin]

+1

I like it as a service since it's more flexible.

[michalkvasnicak]

+1

[erwinmombay]

+1

[builtbylane]

+1

+1

[artem-popov]

+1