Ember.js 1.2.0 debounce not working as expected on jquery events

Question

I am trying to set up a debounce on the window's resize event and have previously been able to with underscore and jquery as follows:

$(window).on('resize', _.debounce($.proxy(this.windowWidthChanged, this), 333));

I took this thinking and tried to apply it to Ember's Ember.run.debounce as follows:

$(window).on('resize', Ember.run.debounce(this, this.windowWidthChanged, 333));

The event listener does not seem to fire at all...

Answer 1

like you might have guessed, you weren't passing a function into the resize event, but the cancel information(the result of calling debounce).

var self = this;
$(window).on('resize', function(){ Ember.run.debounce(self, self.windowWidthChanged, 333)});

This goes back to the classic setTimeout dilemma, why is it running immediately?

setTimeout(alert('hello'),2000)

Answer 2

I ended up wrapping it in an anonymous function inside a proxy to maintain this context:

$(window).on('resize', $.proxy(function() {
    Ember.run.debounce(this, this.windowWidthChanged, 333);
}, this));

I suppose you could just move the Ember.run.debounce inside windowWidthChanged as well.