Understanding this jQuery code with function assignment and callback
I am trying to load some JavaScript files through a custom loader. I used document.write()
to use to write all my files, but I want to use jQuery. I am definitely not an expert in jQuery, only using some of the more basic features and functions, so I took the web. Well, I found the following piece of code that works, but I am a little at a loss to understand it. Here is the code:
(function() {
// Poll for jQuery to come into existence
var checkReady = function(callback) {
if (window.jQuery) {
callback(jQuery);
}
else {
window.setTimeout(function() { checkReady(callback); }, 100);
}
};
// Start polling...
checkReady(function($) {
// Use $ here...
});
})();
My understanding is that the code checks if jQuery is available, and if not, it will check every second. I also understand that if available, the code under Poll will be executed. What I don't understand, and what I have a hard time wrapping around my brain, is the whole parameter callback
and variable checkReady
.
checkReady
is both a variable and a function? If it is a variable that is a function at the top, how can it have another function associated with it in the code at the bottom? Also, what does the callback parameter really do?
source to share
In Javascript, functions are first-class, which means they can be assigned to variables, passed as arguments, and treated like any other variable, such as 5
or "foo"
.
What you see here var checkReady = function(callback) { ... }
is a function being assigned to a variable checkReady
.
What you see here checkReady(function($) { ... });
calls checkReady with an anonymous function function($) { ... }
as an argument. Within a function, checkReady
this refers to a parameter callback
. Anonymous function means you have a literal function with no name, just like having a string literal "foo"
you can call alert("foo");
without naming it var str="foo"; alert(str);
. You can do the same with functions. They can be named or placed as cast things without names.
What you see here window.setTimeout(function() { checkReady(callback); }, 100);
is called window.setTimeout
with an anonymous function function() { ... }
that needs to be completed in 100 milliseconds. After 100 milliseconds, it executes a function that contains a recursive call back to checkReady
with the same argument callback
it received in the first place.
So what does it do callback
? It should contain whatever you want to do after you are sure the jQuery is loaded. This is basically the gist of your program. You pass your entire program, like any other variable, to another function that checks everything as often and calls it when it's ready. That's the beauty of top-notch features .
source to share
Perhaps this cute photo will help
+----------- +------------+
| | | |
| ...v................. V |
| +- - checkReady = function(callback) - -+ |
| : | : |
| : callback() <-execute this--+ : |
| : anon func : |
| : : |
| +- - - - - - - - - - - - - - - - - - - -+ |
| : : |
| : +----------------------->+
| : | : |
| : ^ : |
+<---- checkReady(callback); : |
| : call itself, sending the same : |
| : anonymous callback function : |
| : : |
| +- - - - - - - - - - - - - - - - - - - -+ |
| |
+-calls+ |
| |
^ |
checkReady(function($) { |
// this anon func goes here >----------+
});
source to share
Code
var name = function (params...) { ... statements ... };
creates an unnamed (anonymous) function and places a reference to it in the variable "name". It is important that this code does not create a "name" function. "name" only stores a reference to the function. This link can be copied to another variable, and then this function can be called through the following variable:
var newName = name;
newName(); // invokes the function
I think you might find this interesting if you want to know more about JavaScript functions:
https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Functions
source to share