I'm trying to debounce a function using Lodash, and while it's invoking the function, it doesn't seem to debounce it at all. My issue doesn't seem to be the same mistake as what I've seen elsewhere on SO or Google (generally, that they're not invoking the function that _.debounce
returns).
My currently super-simple implementation is as follows (in Angular with CoffeeScript):
s.search = -> _.debounce( s._makeSearchRequest, 1000 )()
s._makeSearchRequest = -> console.log("making search request")
In JS, I believe that's:
s.search = function() { _.debounce( s._makeSearchRequest, 1000 )() }
s._makeSearchRequest = function() { console.log("making search request") }
I run s.search()
by typing into an input box, and if I type gibberish very quickly, the console prints out "making search request" on every key press, so many times per second -- indicating that it hasn't been debounced at all.
Any ideas what's I'm doing wrong?
_.debounce
creates a function that debounces the function that's passed into it. What your s.search
function is doing is calling _.debounce
all over again every time s.search
is called. This creates a whole new function every time, so there's nothing to debounce.
So the solution is to remove the arrow and the extra pair of parentheses, and make sure that s._makeSearchRequest
is defined before you access it:
s._makeSearchRequest = -> console.log("making search request")
s.search = _.debounce( s._makeSearchRequest, 1000 )
Example (using JavaScript):
var s;
s = {};
s._makeSearchRequest = function(q) {
return console.log("making search request: " + q);
};
s.search = _.debounce(s._makeSearchRequest, 1000);
// call s.search three times in a row
s.search(1);
s.search(2);
s.search(3);
// call s.search after 500 ms
setTimeout(s.search, 500, 4);
// call s.search after 3 seconds
setTimeout(s.search, 3000, 5);
// timer to show passage of time
var i = 0;
var t = setInterval(function () {
i += 1;
console.log(i + " seconds elapsed");
if (i > 5) { clearInterval(t); }
}, 1000);
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>