Writing a generic debounce

[gs]

I am trying to write a generic debouncer to execute the handling function only once in a particular time period for multiple invocations.  I am new to javascript and async programming and therefore am unfamiliar with use of the promise pattern.  I tried my hand at it using some help from non-angular code on the web, but I am not able to make it work so that I can get the return value from the invoked function.  Can someone please help.

  .factory('dnDebounce', ['$timeout', function($timeout) {

    return {

      debounce: function (scope, func, threshold, execAsap) {

        var timeout;

        return function debounced () {

          var obj = this, args = arguments;

          function delayed () {

            if (!execAsap) {

              func.apply(obj, args);

            }

            timeout = null;

          };

          if (timeout) {

            $timeout.cancel(timeout);

          }

          else if (execAsap) {

            scope.$apply(func.apply(obj, args));

          }

          timeout = $timeout(delayed, threshold || 100, true);

          return retv;

        };

      }

    };

  }])

[Peter Bacon Darwin]

Here is a service (ripped off from Underscore's implementation)

http://plnkr.co/edit/fJwRER?p=preview

Pete

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

[Peter Bacon Darwin]

P.S. You can't simply return the promise from the timeout as a new one gets created for each click of the button.  So you have to have your own deferred stuff going on.

Pete

[Anuj Shah]

Thanks Pete!  This is very helpful.  I was also able to do some reading on the promise pattern and now all this makes sense.

Thanks again,

gs

--
Anuj

(404) 661 9776

[Well ✪ Done]

Debounced / throttled model updates for angularjs : http://jsfiddle.net/lgersman/vPsGb/3/ 

After googling around for a throttle/debounce solution of updating an angular model i hacked together a very easy solution seamlessy integrating into angularjs.

Its basically a small piece of code consisting of a single angular directive named "ng-ampere-debounce" utilizing http://benalman.com/projects/jquery-throttle-debounce-plugin/ which can be attached to any dom element. The directive reorders the attached event handlers so that it can control when to throttle events.

You can use it for throttling/debouncing
* model angular updates 
* angular event handler ng-[event]
* jquery event handlers

Have a look : http://jsfiddle.net/lgersman/vPsGb/3/ 

The directive will be part of the Orangevolt Ampere framework (https://github.com/lgersman/jquery.orangevolt-ampere).