How do I pass a variable number of parameters along with a callback function?
- by Bungle
I'm using a function to lazy-load the Sizzle selector engine (used by jQuery):
var sizzle_loaded;
// load the Sizzle script
function load_sizzle(module_name) {
var script;
// load Sizzle script and set up 'onload' and 'onreadystatechange' event
// handlers to ensure that external script is loaded before dependent
// code is executed
script = document.createElement('script');
script.src = 'sizzle.min.js';
script.onload = function() {
sizzle_loaded = true;
gather_content(module_name);
};
script.onreadystatechange = function() {
if ((script.readyState === 'loaded' || script.readyState === 'complete') &&
!sizzle_loaded) {
sizzle_loaded = true;
gather_content(module_name);
}
};
// append script to the document
document.getElementsByTagName('head')[0].appendChild(script);
}
I set the onload and onreadystatechange event handlers, as well as the sizzle_loaded flag to call another function (gather_content()) as soon as Sizzle has loaded. All of this is needed to do this in a cross-browser way.
Until now, my project only had to lazy-load Sizzle at one point in the script, so I was able to just hard-code the gather_content() function call into the load_sizzle() function.
However, I now need to lazy-load Sizzle at two different points in the script, and call a different function either time once it's loaded. My first instinct was to modify the function to accept a callback function:
var sizzle_loaded;
// load the Sizzle script
function load_sizzle(module_name, callback) {
var script;
// load Sizzle script and set up 'onload' and 'onreadystatechange' event
// handlers to ensure that external script is loaded before dependent
// code is executed
script = document.createElement('script');
script.src = 'sizzle.min.js';
script.onload = function() {
sizzle_loaded = true;
callback(module_name);
};
script.onreadystatechange = function() {
if ((script.readyState === 'loaded' || script.readyState === 'complete') &&
!sizzle_loaded) {
sizzle_loaded = true;
callback(module_name);
}
};
// append script to the document
document.getElementsByTagName('head')[0].appendChild(script);
}
Then, I could just call it like this:
load_sizzle(module_name, gather_content);
However, the other callback function that I need to use takes more parameters than gather_content() does.
How can I modify my function so that I can specify a variable number of parameters, to be passed with the callback function? Or, am I going about this the wrong way?
Ultimately, I just want to load Sizzle, then call any function that I need to (with any arguments that it needs) once it's done loading.
Thanks for any help!
