A user on Stack Overflow posted a question related to overriding a native JS function. The question is here and this is the code:
function throttle(fn, time) {
var handle;
var execute = function() {
handle = null;
fn.apply(this, arguments);
};
var throttled = function() {
if(!handle) {
handle = setTimeout(execute.bind(this), time);
}
};
throttled.toString = function() {
return fn.toString() + "\n// throttled to " + time + "ms";
};
return throttled;
}
var makeAjax = throttle(function(callback) {
$.getJSON("/path", callback);
}, 500);
I have a pretty good handle (I think) on JavaScript, but there are some areas that remain very grey to me. I would like to know what is happening in this code?
I don't really understand what bind
and apply
are doing, or what the end result of this all would be. I've looked up bind
and apply
on Mozilla's JS documentation, but the "official" definition has done little to help me understand what they are doing in this context.
I appreciate your help!
Best Answer
I found it quite hard to read as well, context juggling code is in general hard to read, and therefore error-prone.
this
in JavaScript often refer to the parent of the function, that is, when a function is stored as the field of an object like:Calling
obj.f()
will returnobj
, simply callingfun()
however will return thewindow
element as the function is not called as a member, so the value ofthis
depend on context. When making a wrapper like the one you show the context forthis
will invariably change, thebind
andapply
methods are made for dealing with situations like that.fun.bind(cont)
will make a version offun
wherethis
is alwayscont
.fun.apply(cont,args)
will runfun
withthis
set tocont
and the values in the arrayargs
as parameters.The code in question demonstrate how convoluted these things get by failing to pass the given arguments to the function. The real parameters are passed to
throttled
, but thearguments
array that is used come fromexecute
, it is empty.Using the
bind
function is unnecessary,this
could just as well be stored in a simple variable.Here is a fixed, and in my opinion easier to read, version, along with code that demonstrate the functionality: