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!
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:
function fun(){
return this
}
obj = {f:fun}
Calling obj.f() will return obj, simply calling fun() however will return the window element as the function is not called as a member, so the value of this depend on context. When making a wrapper like the one you show the context for this will invariably change, the bind and apply methods are made for dealing with situations like that. fun.bind(cont) will make a version of fun where this is always cont. fun.apply(cont,args) will run fun with this set to cont and the values in the array args 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 the arguments array that is used come from execute, 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:
function throttle(fn, time) {
var handle;
function throttled() {
var args;
var context;
if(!handle) {
args = arguments;
context = this;
handle = setTimeout(execute, time);
}
function execute() {
handle = null;
fn.apply(context, args);
};
};
throttled.toString = function() {
return fn.toString() + "n// throttled to " + time + "ms";
};
return throttled;
}
obj = {
toString:function(){
return "obj's toString";
}
,f:throttle(function(input){
console.log(input+", "+this);
},1000)
}
obj.f("input string 1")
obj.f("input string 2")
obj.f("input string 3")
obj.f("input string 4")
1
It’s quite simple really – the handle of a setTimeout call is used as a guard against multiple execution.
The throttled variable contains a function that is also the return value – makeAjax will contain that function. When it is executed, it will either
-
Cause the
executefunction to be called after a delay, if handle has been cleared / not already set -
Return immediately otherwise.
This makes the name of the function apparent – it throttles the execution of the input function to after a certain time, and no more than once concurrently.
It uses bind to set the this context of the function stored in the execute variable.
The execute variable is a function wrapping the calling of the input function with the clearing of the handle, so that whenever the function stored in execute is called it allows further executions of the function. The function uses apply to execute the function with a specific context and arguments.
I hope that clears something up – I found it hard to put into words at all, and I’m not sure I managed it in a clear and concise way.
0