JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<div ng-app="debounce">
    <h2>
        <a target="_blank" href="https://github.com/lgersman/jquery.orangevolt-ampere"> Orangevolt Ampere</a> ng-ampere-debounce directive - demo
    </h2>   
    
    <div ng-controller="myController">
        Type some text to see the model debounced (1000ms) updated.
        <br>
        <label>
            mymodel:
            <input type="text" ng-model="myModel" ng-ampere-debounce>
        <label>
        <div>
           mymodel = {{myModel}}
        </div>
    </div>
        
   
                
    <p>
        <i>
        requires jQuery and <a target="_blank" href="http://benalman.com/projects/jquery-throttle-debounce-plugin/">jquery-throttle-debounce-plugin.</a>
        </i>        
        <br>
        <i>
        its very easy to convert this directive to work also with the <code>_.debounce()<code> from underscore or lo-dash library.
        </i>        
    </p>  
            
<pre>/**
* ng-ampere-debounce directive allows debouncing/throttling of any kind of events 
*
* you can use it also for non angular model updates 
* (.i.e. for regular ng-[event]/[event] throttling/debouncing)
* 
* example usage : 
*
* &lt;input type="text" ng-model="mymodel" ng-ampere-debounce&gt; 
* will debounce updating mymodel with 1000ms delay
*
* &lt;input type="text" ng-model="mymodel" ng-ampere-debounce="leading"&gt; 
* will updating mymodel initial but suppress all further updates within 1000ms delay 
*
* &lt;input type="text" ng-model="mymodel" ng-ampere-debounce="{ timeout : 500}"&gt; 
* will debounce updating mymodel with 500ms delay
* 		
* &lt;input type="text" ng-model="mymodel" ng-ampere-debounce="{ leading : true }"&gt; 
* will updating mymodel initial but suppress all further updates within 1000ms delay
* 		
* &lt;input type="text" ng-model="mymodel" ng-ampere-debounce="{ timeout  : 500, leading : true }"&gt; 
* will updating mymodel initial but suppress...

JavaScript

// for illustration purposes the directive is included here instead of linking  it

angular.module('debounce', [])
/*!
 * jQuery Orangevolt Ampere
 *
 * version : 0.2.0
 * created : 2013-08-15
 * source  : https://github.com/lgersman/jquery.orangevolt-ampere
 *
 * author  : Lars Gersmann ([email protected])
 * homepage: http://www.orangevolt.com
 *
 * Copyright (c) 2013 Lars Gersmann; Licensed MIT, GPL
 */
.directive( 'ngAmpereDebounce', [ function() {
    var DEFAULTS = { timeout : 1000 }
    ;
    
    return {
        restrict    : 'A',	
        link		: function( scope, element, attrs) {
            // normalize directive options
            var options = scope.$eval( attrs.ngAmpereDebounce) || $.extend( {}, DEFAULTS);
            if( options==='leading') {
                options = $.extend( { leading : true}, DEFAULTS);
            } else {
                options.leading = !!options.leading;	// make it a real boolean
            }
            
            var map = $._data( element[0], 'events'),
                events = $.each( Object.keys( map), function( index, eventName) {
                    // ensure only real events are handled
                    if( eventName.charAt( 0)!='$') {
                        // install debounce mechanism
                        var debounced = $.debounce( options.timeout, options.leading, function( event) {
                            //console.log( 'debounce called');
                            
                            // iterate over all event handlers registered before ourself
                            // (remember : we moved ourself at first position while installing)
                            for( var i=$.inArray( debounce_handlerobj, map[eventName])+1; i<map[eventName].length; i++) {
                                var handlerobj = map[eventName][i];
                                
                                // call original event handler  										
                               ...