CODEWITHSUNDEEP
javascript
MddHtt13
MddHtt13

Reputation: 373

Could someone please help me to understand the following block of code?

I am a little confused by the following block of code. I will comment next to each line what I think it means. If someone could help me clarify any misunderstandings I have or confirm that I am in fact interpreting it correctly, I would very much appreciate that.

Here is this code in context: http://jsfiddle.net/MddHtt13/EMBZr/1/ 

  if(!window.onload) { // If the window is not loaded then...
        window.onload = function() { //Assign an anonymous function to the onload event
            onLoad(); //Which, upon execution of the onload event execute the onLoad function
        };
    }
    else { //This is probably the most confusing part
        var oldWindowLoadFunction = window.onload; //Else if the window is loaded, assign the onload event to the variable oldWindowLoadFunction
        window.onload = function() {  //Then upon completion of the onload event, assign an anonymous function 
            oldWindowLoadFunction(); //which then re-executes the onload event 
            onLoad(); //and then executes the onLoad function 
        };
    }

The first thing I don't understand is the exclamation point next to window.onload

if(!window.onload)

Why would I need to specify if the window is not yet loaded? Wouldn't I only want to attach the onLoad() function to the onload event so that upon completion it fires? Say with something like:

window.onload = onLoad();

Why the extra steps? Why the if/else statement?

Secondly, why in the second half of the code block do I need to reload the page only to reattach the onLoad() function again? That sort of brings me back to what I just asked. Why does it have to be more complicated that simply writing:

window.onload = onLoad();

Ofcourse when I change the code to be a simple statement, like the one above, it doesn't actually work. However, I still don't completely understand the necessity of each part of the code block in question.
If someone could walk me through this in detail it would be extremely helpful.

Edit:
Thanks to the help of the folks below I replaced all of this code with one simple statement:

window.addEventListener('load', onLoad);

Upvotes: -1

Views: 96

Answers (2)

L. Cornelius Dol
L. Cornelius Dol

Reputation: 64065

The ! is a boolean inversion: if not window.onload is null or undefined, or in plainer English, if the variable named onload in the object named window is not null or undefined.

The logic basically says, if there is no onload function install mine. If there is an onload function install a new wrapper function which calls the existing function and then calls mine.

None of the code "reloads" the page. You are confusing the assignment of the onload handler with loading the page.

What the function is doing is adding onload functionality to a window object which may already have onload functionality by chaining added function to the original, but only if that's necessary.

In today's world, it's all redundant, since you can just add an event listener to a list of functions to be executed for the onload event.

Upvotes: 1

Paul Asjes
Paul Asjes

Reputation: 5857

if (!window.onload)

This is checking to see if window.onload is not null or undefined. If window.onload is already defined elsewhere then you might not want to replace it with your onLoad() function.

Your block of code basically checks to see if window.onload is defined elsewhere. If it isn't, assign onLoad() to window.onload. If it does, execute the existing window.onload and then call your onLoad() function as well.

Upvotes: 1

Related Questions