

Rate-limiting JavaScript function calls - zacharytamas
http://ryhan.org/post/33374611308/limiting-function-calls

======
wonnage
This could make your code behave unpredictably, since you don't really know
what events will be used or dropped. For something like a drag handler it's
probably not an issue, but it's a little hard to reason about a function whose
state depends on when the function was last called. You could easily run into
a bug where two pieces of code call a trickle'ed function, expecting it to
take an action, and encountering a bug when the two calls are too close.

If polling is what's needed then it makes more sense to use setInterval and
have a better guarantee of when things are being run. Or you could stuff
events into a buffer and have a function consume them periodically - either
way, when you lose an event it's either 1. irrelevant, because polling only
cares about the state at time t and not the events, or 2. deterministic,
because your consumer function decided to get rid of it.

~~~
kwamenum86
you probably run into that more with global functions, which this definitely
isn't suitable for. but if you trickle a callback that just handles, for
example, keydown on a single input, this sort of thing is really useful.

------
csense
This program has a bug.

Suppose the user is entering the word "hacker" at .101 seconds per character,
and your cooldown time is .3, your code will do something like this:

    
    
      t=0.000 : 'h' FIRE
      t=0.101 : 'a'
      t=0.202 : 'c'
      t=0.303 : 'k' FIRE
      t=0.404 : 'e'
      t=0.505 : 'r'
    

If the expensive, rate-limited function is an AJAX call to the server to see
if a username is available, for example, you'll want to call again with
"hacker" at t=0.6 seconds, not keep displaying the result for "hack" forever.

Actually, the expected behavior isn't sufficiently well-specified to determine
whether the code implements it. But I believe many applications of such code
will need to take care to avoid the behavior I describe.

As suggested in another comment, I'd use a setInterval (classic JS) or a
separate thread (HTML5 or node.js) to periodically check if the function needs
to be run, and if so, run it.

------
mandeepj
I am doing validation for username and email from JavaScript with the server
similar to the way twitter is doing. I have to make sure that I do not bombard
my server for each keystroke and mouse click (in case user decides to
copy+paste the email address using the mouse). This is how I did. It works so
far but as always it can enhanced. I can share the full source but it is the
skeleton to give u the idea. In essence I am waiting for 1300 milliseconds
before hitting the server again.

$(emailTextBoxId).keyup(function (event) {

    
    
        //executes a function, once, after waiting a specified number of milliseconds
        setTimeout("CheckEmailAddressAvailability()", 1300);
        //stopping bubble
        return false;

});

$(emailTextBoxId).keydown(function (event) {

    
    
        safeToPerformEmailCheck = true;
        document.getElementById("ValidEmailAdd").style.display = "none";
        document.getElementById("ExistingEmailAcc").style.display = "none";
        //document.getElementById("InvalidEmailAdd").style.display = "none";
    

});

$(emailTextBoxId).mouseup(function (event) {

    
    
        safeToPerformEmailCheck = true;
        CheckEmailAddressAvailability();
    

});

Edit: I just saw the examples posted by fellow readers at following links are
much better than mine. I am glad I really learned some good stuff today and I
will edit my code today as first thing once I go home this eve. Really neat.

<http://jsbin.com/ejimok/3/edit>

<http://jsbin.com/ejimok/5/edit>

------
tlrobinson
This is one of the great things about JavaScript and functional programming in
general. You can create reusable control flow abstractions easily.

Other examples are things like memoizing/caching values, logging, etc.

------
nodesocket
Here is how we implement throttle. <http://jsbin.com/ejimok/3/edit>

~~~
ihsw
Here is an example that doesn't use global variables.

<http://jsbin.com/ejimok/5/edit>

------
timothya
Google Closure also provides throttling functionality:

[http://closure-library.googlecode.com/svn-
history/r44/docs/c...](http://closure-library.googlecode.com/svn-
history/r44/docs/class_goog_Throttle.html)

------
pyrotechnick
<http://underscorejs.org/#throttle>

~~~
jashkenas
The current implementation of Underscore's debounce and throttle functions
(both useful) is available here:

[https://github.com/documentcloud/underscore/blob/master/unde...](https://github.com/documentcloud/underscore/blob/master/underscore.js#L618-664)

~~~
rthprog
OP here.

I updated the post with a link to underscore's annotated source for debounce
and throttle. Thanks for the tip.

