Matrix_Prime
Matrix_Prime

Reputation: 31

Understanding this jQuery code with function assignment and callback

I am trying to load some JavaScript files via a custom loader. Previously I was using document.write() to write all of my files out, but I want to make use of jQuery. I'm definitely no expert in jQuery, only using some of the more basic features and functionality, so I took to the web. Well, i found the following piece of code, which DOES work, but I'm having a little trouble understanding 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...
    });
})();

I understand the fact that the code is checking to see if jQuery is available, and if not, it will keep checking every second. I also understand the fact that if it is available, the code under the "Polling" will execute. What I'm not understanding, and what I'm having a hard time wrapping my brain around, is the whole callback parameter and the checkReady variable. checkReady is both a variable as well as a function? If it's a variable which is a function in the top section, how can it have a different function associated with it in the code in the lower section? Also, what is the callback parameter actually doing?

Upvotes: 3

Views: 212

Answers (3)

Popnoodles
Popnoodles

Reputation: 28409

Maybe this pretty picture 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  >----------+
    });

Upvotes: 1

Plynx
Plynx

Reputation: 11461

In Javascript, functions are first-class, meaning that they can be assigned to variables, passed as arguments and treated as you would any other variable, like a 5 or "foo".

What you're seeing here var checkReady = function(callback) { ... } is the function being assigned to the variable checkReady.

What you're seeing here checkReady(function($) { ... }); is checkReady being called with the anonymous function function($) { ... } as its argument. Inside the function checkReady this is referred to with the callback parameter. An anonymous function just means you have a literal function there without a 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 thing with functions. They can be named or put inline as literal things without names.

What you're seeing here window.setTimeout(function() { checkReady(callback); }, 100); is window.setTimeout being called with an anonymous function function() { ... }, set to be executed in 100 milliseconds. In 100 milliseconds, it executes the function, which contains a recursive call back to checkReady with the same callback argument it got in the first place.

So what is callback doing? It's intended to contain everything you want to do after you're sure JQuery is loaded. Basically it's the substance of your program. You're passing your whole program around like it's any other variable, to another function that checks things every so often and calls it when it's ready. This is the beauty of first-class functions.

Upvotes: 2

Alex Netkachov
Alex Netkachov

Reputation: 13522

The code

var name = function (params...) { ... statements ... };

creates an unnamed (anonymous) function and puts the reference to it into the "name" variable. It is important that this code does not create "name" function. "name" only stores reference to the function. This reference can be copied to another variable and then the function can be called via this another variable as follows:

var newName = name;
newName(); // invokes the function 

I think that you may find this interesting if you want to read more about the JavaScript functions:

https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Functions

Upvotes: 0

Related Questions