CODEWITHSUNDEEP
javascriptfunctionoop
AlexHill
AlexHill

Reputation: 31

Can someone explain this Javascript code?

I am trying to understand how this code works. I finally figured out it is a loop. It is not a "while" or "for" loop, but it is a loop nonetheless by virtue of calling itself I think (please correct me if I am wrong).

I understand it's main function: to pass JQuery when it is loaded to my 'foo' function, when ever jQuery has loaded. To do that it checks for jQuery in Window and if not there it resets the timer(). That is the loop. I get that.

Let me explain what I do not understand:

  1. the call: CheckDependency.Deferred.execute(foo);
    • why the "Deferred" keyword?
    • execute baffles me: I expect that if I call CheckDependency.Deferred.execute that it would only execute that method. Why does it obviously run the timer function. why could it not simply have that code after the timer() since it keeps looping there and then return jquery?
  2. Speaking of return. Why is there a method in there? CheckDependency.Deferred.execute(foo); is as crazy to me as CheckDependency.Deferred.RETURN.execute(foo); (or some similar crazy statement)

I am fairly new to JavaScript (from PHP). Here the code:

function foo(){ console.log('jQuery found!');
} 
var CheckDependency = CheckDependency || { };
CheckDependency.Deferred = function () 
{
    var functions = [];
    var timer = function() {
        if (window.jQuery) {/* && window.jQuery.ui*/
            while (functions.length) {
                functions.shift()(window.jQuery);
            }
        } else {
            window.setTimeout(timer, 250);
        }
    };
    timer();
    return {
    execute: function(onJQueryReady) 
    {
        if (window.jQuery) { // && window.jQuery.ui
            onJQueryReady(window.jQuery);
        } else {
            functions.push(onJQueryReady);
        }
    }
  };
}();
CheckDependency.Deferred.execute(foo);

Upvotes: -1

Views: 117

Answers (1)

Brian Riley
Brian Riley

Reputation: 946

Let me start by saying I'm not a javascript expert, but I dabble :) I'll take a stab at describing what is going on here.

First, This creates a new object called "CheckDependency".

var CheckDependency = CheckDependency || { };

Next, it runs an anonymous function, and stores the result in CheckDependency.Deferred.

CheckDependency.Deferred = function () 
{
    .
    .
    .
    .
}()

The anonymous function runs the following code:

var functions = [];
var timer = function() {
    if (window.jQuery) {/* && window.jQuery.ui*/
        while (functions.length) {
            functions.shift()(window.jQuery);
        }
    } else {
        window.setTimeout(timer, 250);
    }
};
timer();

The last part of the function code returns a new function execute, which gives CheckDependency.Deferred a function execute.

return {
    execute: function(onJQueryReady) 
    {
       if (window.jQuery) { // && window.jQuery.ui
            onJQueryReady(window.jQuery);
        } else {
            functions.push(onJQueryReady);
        }
    }
  };

Finally, this new function is called

CheckDependency.Deferred.execute(foo);

The final result of this is that the code starts a background timer that calls itself until window.jQuery is true - which means jQuery is loaded. Then, the function passed to execute is passed into this loop and so will once jQuery is available, the original function passed to "execute" will be called with the instance of window.jQuery.

I hope I did this justice, and I hope my answer helps! Please let me know if you have any question.

Upvotes: 2

Related Questions