_.debounce() fires at most evevry x milliseconds with _.debounce(function,x) .. I want to adapt this to only execute a method x millis after the last _.debounce().

How do I go about this? (I've read that $.debounce does exactly that btw.)

I've tried to do this, but it isn't bullet-proof (not to mention butt-ugly)

var timeout;
$(window).on("resize",_.debounce(function(){
  if(timeout){
    clearTimeout(timeout);
  }
  //when debounce es in we cancel it.. this means only the latest debounce actually fires.
  //not bullet proof
  timeout = setTimeout(resizeMap,100);
},50));

How to do this elegantly?

_.debounce() fires at most evevry x milliseconds with _.debounce(function,x) .. I want to adapt this to only execute a method x millis after the last _.debounce().

How do I go about this? (I've read that $.debounce does exactly that btw.)

I've tried to do this, but it isn't bullet-proof (not to mention butt-ugly)

var timeout;
$(window).on("resize",_.debounce(function(){
  if(timeout){
    clearTimeout(timeout);
  }
  //when debounce es in we cancel it.. this means only the latest debounce actually fires.
  //not bullet proof
  timeout = setTimeout(resizeMap,100);
},50));

How to do this elegantly?

• javascript
• underscore.js

• 1 It's kind of confusing what you're after. Can you explain a bit more? Do you want to debounce your debounce? Yo dawg... What you describe seems to be exactly what debounce is designed for. Why do you need an additional timeout? – Alex Wayne Commented Dec 5, 2012 at 18:13
• hehe.. well perhaps it's my browser (infrequent resize events, causing _debounce to be called? testing on Chrome), but while resizing, I keep getting multiple calls to the body of the debounced function. As if it's behaving exactly as _.throttle now I e to think of it.. Weird stuff. – Geert-Jan Commented Dec 5, 2012 at 19:01

2 Answers 2

After reading your ment, this is clearer now.

well perhaps it's my browser (infrequent resize events, causing _debounce to be called? testing on Chrome), but while resizing, I keep getting multiple calls to the body of the debounced function. As if it's behaving exactly as _.throttle now I e to think of it.. Weird stuff.

50ms is a pretty low debounce time. I'm betting it was working as intended, and you just need a longer debounce time. 50ms is 1/20th of a second. I'm not sure the window resize event fires that quickly. But even if it does, the tiniest pause in mouse movement while resizing could triggers this.

Remove all this setTimeout nonsense in your debounced function and set the debounce time to something more like 250 and I bet it will work just like you want.

From http://underscorejs/#debounce:

_.debounce(function, wait, [immediate])

Pass true for the immediate parameter to cause debounce to trigger the function on the leading instead of the trailing edge of the wait interval. Useful in circumstances like preventing accidental double-clicks on a "submit" button from firing a second time.

So, $(window).on("resize",_.debounce(resizeMap,100)) should just work.