Angular JS cancel a debounce function after one itration - angularjs

Question

I saw in a tutorial a debounce function made for angular js. It works well (but I do not understand the code very well).
The questions are:
Can you explain how this debounce works?
How can I reset the debounce function after it has worked one time?
function debounce(callback, interval) {
var timeout = null;
return function() {
$timeout.cancel(timeout);
timeout = $timeout(callback, interval);
};
};
inputNgEl.bind('keydown keypress', debounce(function () {
el.toggleClass('has-error', formCtrl[inputName].$invalid);
el.toggleClass('has-success', formCtrl[inputName].$valid);
}, 1000));

Answer 1

Can you explain how this debounce works?
The debounce(callback, 1000) returns a new function. So this inputNgEl.bind('keydown keypress',debounce(callback, 1000)) attaches function returned from debounce as event handler inputNgEl.
When events happen the attached event handler function is called possibly many times in row which results in:
time (in 100ms): 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
keepresses : ↓ ↓ ↓
time to fire : 10 9 8 10 9 8 7 6 5 4 3 2 1 ✦ 10 9
callback
(in 100ms)
So when the event handler (returned from debounce) is called timeout variable is null. Calling $timeout.cancel(null) does nothing. Next we schedule the callback function to be executed after 1000 ms using $timeout service call. The call returns a promise that will be resolved after the given timeout (1000ms) elapses.
Now on second call to event handler the timeout variable has a promise so we cancel it - the callback function wont be called. Next we immediately schedule callback function again to be executed after 1000 ms and store a new promise inside timeout variable.
How can I reset the debounce function after it has worked one time?
I'm not sure what you mean by reseting the function? Immediately after callback is called the debounce function state and behaviour is almost identical to initial state - except for timeout variable.
If you would like to remove the debounce effect after the the callback is called for the first time you could do something like:
function debounce(callback, interval) {
var timeout = null;
var inner = function() {
$timeout.cancel(timeout);
if(inner.interval){
timeout = $timeout(function(){
callback();
inner.interval = null;
}, interval);
} else {
callback();
}
};
inner.interval = interval;
return inner;
};
Which basically after first timeout elapses will switch to calling callback immediately.