Explain this JavaScript onload function

Question

Here's an example for registering a function on document load (most of it taken from JavaScript: The Definitive Guide):

"use strict";

//run function f when document is loaded
function onLoad(f) {
    if (onLoad.loaded) // If already loaded
        window.setTimeout(f, 0); 
    else if (window.addEventListener) 
        window.addEventListener("load", f, false);
}

onLoad.loaded = false;
onLoad(function() { onLoad.loaded = true; });

onLoad(myfunc);

function myfunc() {
    console.log("Hello, world!");
}

I'm getting confused with the line onLoad(function() { onLoad.loaded = true; });. I can tell that it's self-invocation, but using the function name again baffles me. Why is it needed? I find that if I do only (function() { onLoad.loaded = true; }); then also the output is the same.

Finally, I can get the same output by using:

function myfunc() {
    console.log("Hello, world!");
}

window.onload = (function() {window.setTimeout(myfunc, 0);});

How is my code better/worse?

Quentin · Accepted Answer · 2014-06-02 09:41:22Z

2

I'm getting confused with the line onLoad(function() { onLoad.loaded = true; });. I can tell that it's self-invocation, but using the function name again baffles me.

It isn't a self-invocation.

It is a call to the function onLoad (previously defined) with one argument (which is a function expression).

Finally, I can get the same output by using… How is my code better/worse?

Your code will:

Only support a function function to be called when the load event fires. If you try to assign another function, it will overwrite the previous one instead of setting up two functions to be called when the event fires.
Won't call the function immediately (or at all) if the load event has already fired (so you can't use it in a script that can be dynamically added to the page as well as being used normally)

answered Jun 2, 2014 at 9:41

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ankush981 Over a year ago

Excellent answer! Now it makes complete sense. :)

Collectives™ on Stack Overflow

Explain this JavaScript onload function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related