Scroll / resize event throttling

[LostKobrakai]

I'm currently trying to build all my javascript in a own object namespace for the first time. Now I wanted to implement a throttle function to limit the scoll and resize event calls. While I found a working debounce function I didn't manage to get one which calls the event function at a limited rate instead of at the end of all those event calls, which is especially important for the scoll events. 

var HONourables = {

	win: $(window),

	init: function(){
		this.establishEventListeners();
	},

	establishEventListeners: function(){
		this.win.on("scroll", this.scroll);
		…
	},

	scroll: function(e){
		HONourables.fixHeader();
	},

	throttle: function(fn, ms){
	},
[…]
}

That's my current structure and ideally I'll be able to throttle the function calls in scroll() independently. Sadly all the ones I found all broke after putting them in the object structure, while working in a simple jsfiddle testcase. 

Can somebody point me in a direction to get this working?

Edit: One of the functions I found: http://jsfiddle.net/vu9hrrvk/

[felix]

The reason this won't work is that you're using "this" wrong. "This" in your case isn't referring to your namespace but to document/global. You have to either wrap your code inside a self executing function or create a constructor and instanciate it with the new keyword.

Have a look at this link:

http://toddmotto.com/understanding-the-this-keyword-in-javascript/

[Martijn Geerts]

Thats a good follow up on the Mozilla Closures article. Thanks felix!

[felix]

@LostKobrakai  I've fiddled something for you. If you got any questions concerning the code just let me know.

@Martijn: If you're interested in digging deeper into javascript patterns this is a "must read": http://addyosmani.com/resources/essentialjsdesignpatterns/book/ 

Edited October 14, 2014 by Martijn Geerts
fixed the link, thanks felix

[LostKobrakai]

Thanks for all your replies. I know about closures and context (even if I'm not perfect in it). I tested it further and found that the issue doesn't have to do with the way I build my object. I get my postet throttle function to work, if I use it like felix did in his jsfiddle. 

This works:

…
$(window).on("scroll", this.throttle(function, 200));
…

But this doesn't:

…
$(window).on("scroll", this.scroll);
…
scroll: function(e){
  HONourables.throttle(HONourables.function, 200);
}

Each time the context should be the window object as it's fireing the scroll event. But somehow the throttle function in the first version is only called/initiated once, while the second one is, as I would expect it, called over and over.