underscore throttle + ensure last call

Question

Underscore provides the method, throttle. From their docs:

Creates and returns a new, throttled version of the passed function, that, when invoked repeatedly, will only actually call the original function at most once per every wait milliseconds. Useful for rate-limiting events that occur faster than you can keep up with.

Now imagine the case of an autocomplete form. This means that if 'abc' is typed within a, say, 100ms window, then only a search for 'a' will be sent, and not 'bc'.

Is this a drastic oversight on the part of underscore.js? What would you suggest as a clean solution?

score 5 · Accepted Answer · answered Apr 24 '12 at 22:06

5

For this use case, you may want to use the following "buffer" function, which will apply only the last call within the wait window.

https://gist.github.com/2484196

_.buffer = function(func, wait, scope) {
  var timer = null;
  return function() {
    if(timer) clearTimeout(timer);
    var args = arguments;
    timer = setTimeout(function() {
      timer = null;
      func.apply(scope, args);
    }, wait);
  };
};

answered Apr 24 '12 at 22:06

pedroteixeira

766
6
7

1

Nice solution, +1. Still, I'd not add it to the `_` object because this may confuse someone that reads your code. *"Was this method from an older version of Underscore? Is this a [Lo-Dash](http://lodash.com/) extension?"* – Camilo Martin Sep 13 '14 at 23:52

score 4 · Answer 2 · edited May 23 '17 at 12:34

4

Ah, I didn't read the docs right! There is a function for this.

var test = _.debounce(function() { console.log('foo'); }, 3000);

Then if you call test() a few times you'll notice that only after three seconds since the last call, will the function ever be called.

This is exactly what we both were looking for... and didn't notice was right below throttle on the docs.

Underscore docs, Lo-Dash docs (what is LoDash?)

edited May 23 '17 at 12:34

Community

1
1

answered Sep 15 '14 at 18:45

Camilo Martin

35,841
20
107
152

2

While this seems to work in this use case, debounce and throttle give a different behavior. I'm looking for a way to keep the requests going through while typing, but still ensure the last call (as in the question here). – Joe Hidakatsu Jun 14 '21 at 02:52

score 1 · Answer 3 · answered Jun 14 '21 at 03:20

It looks like the other answers mention using debounce instead of throttle. I found a solution that allows you to keep throttle behavior (keeping function calls going through) while still ensuring the last call.

https://gist.github.com/ayushv512/a2f963bface38f5e2f6f6bba39bba9b9#file-throttle-js

 const throttle = (func, limit) => {
  let lastFunc;
  let lastRan;
  return function() {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args)
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
          if ((Date.now() - lastRan) >= limit) {
            func.apply(context, args);
            lastRan = Date.now();
          }
       }, limit - (Date.now() - lastRan));
    }
  }
}

score 1 · Answer 4 · answered Mar 08 '12 at 05:01

1

I keep an idle function around to handle this type of user interaction. The idea is to require some function to be called at a regular interval (i.e, when a key is pressed in an input); as soon as the interval passes without a call to said function, a separate callback is triggered. This might not be quite the behavior you want for your autocomplete (you might want to start searching before the user's input has paused), but it's one approach I've used in the past.

If anyone has a better solution for this, though, I'm all ears!

answered Mar 08 '12 at 05:01

rjz

15,582
3
33
34

that's good to know (especially the _ mixin!), but not exactly the same- I definitely want results to appear while people type. – Peter Ehrlich Mar 08 '12 at 05:29
Yeah, I hear you. I think the tricky part is deciding where to draw the line with respect to the user's typing speed and the delay in getting a response from the AJAX request. Without some kind of googlesque pre-fetch, it seems like the request will (necessarily) lag behind user input. More pondering needed :-) – rjz Mar 08 '12 at 05:35

score 0 · Answer 5 · answered Mar 08 '12 at 04:59

0

Yes, you are right that it won't work well for an autocomplete form. I think it's meant for other types of things, though. The example given is handling scroll events.

answered Mar 08 '12 at 04:59

nicholaides

18,686
12
62
82

underscore throttle + ensure last call

5 Answers5