AngularJS service and directive for debounce
JavaScript HTML
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo initial commit Mar 21, 2014
test feat(Debounce Service): support invokeApply parameter Sep 10, 2015
.gitignore bower components correct location Mar 21, 2014
.jshintrc initial commit Mar 21, 2014
.travis.yml
Gruntfile.js coverage config fix Mar 21, 2014
LICENSE initial commit Mar 21, 2014
README.md underscore typo (#19) Aug 2, 2016
angular-debounce.js feat(Debounce Service): support invokeApply parameter Sep 10, 2015
bower.json release 0.1.7 Sep 10, 2015
karma.conf.js chore(bower): make dependencies less strict Sep 22, 2014
package.json

README.md

Angular Debounce Build Status Coverage Status

AngularJS debounce service and directive

What it does

  1. Service - Creates and returns a new debounced version of the passed function which will postpone its execution until after wait milliseconds have elapsed since the last time it was invoked. Useful for implementing behavior that should only happen after the input has stopped arriving. For example: recalculating a layout after the window has stopped being resized.

  2. Directive - Can be added to any element with an ng-model attribute and postpone model updates by user input until after wait milliseconds have elapsed since the last user input. Useful for watchers that should only be invoked after the input has stopped arriving. For example: rendering a preview of a Markdown comment.

Installation

Install using bower

bower install --save ng-debounce

Include script tag in your html document.

<script type="text/javascript" src="bower_components/ng-debounce/angular-debounce.js"></script>

Add a dependency to your application module.

angular.module('myApp', ['debounce']);

Service Usage

debounce(func, wait, [immediate], [invokeApply])

Arguments

Param Type Details
func function The function we want to debounce
wait number Number of miliseconds to wait before invoking the debounced function
immediate (optional) boolean Pass true for the immediate parameter to cause debounce to trigger the function on the leading instead of the trailing edge of the wait interval. Useful in circumstances like preventing accidental double-clicks on a "submit" button from firing a second time.
invokeApply (optional) boolean invokeApply param passed to $timeout service (defines whether apply should be called in order to trigger a digest cycle at the end of the func call) - see $timeout service for more details

Returns

A debounced version of the passed function. Any arguments passed to this function will be also passed to the passed function in case this invocation will trigger the function.

The returned function also has a cancel() method which can be used in case you what to reset the current debounce state. This will prevent the function from being triggered even after wait miliseconds have passed from last input. In case immediate is true, this means that the next user input will trigger the debounce.

Directive Usage

<input type="text" ng-model="blah" debounce="500"></input>
<input type="checkbox" ng-model="blah" debounce="500" immediate="true"></input>
etc.

Arguments

Param Type Details
debounce number Number of miliseconds to wait before triggering the model update
immediate (optional) boolean Pass true for the immediate parameter to cause debounce to trigger model update on the leading instead of the trailing edge of the wait interval.

Reference

The debounce service is based on the debounce implementation in underscorejs

License

The MIT License.

See LICENSE