Jquery document ready with function declaration?

Question

I want to know why the below code works differently when according to the documentation it should do the same thing. http://learn.jquery.com/using-jquery-core/document-ready/

First example:

<script>
    $( document ).ready(function() {
        document.write("And what?");
    });
</script>

• It actually overwrites everything on the page and return only "And What?"....

Second example:

<script>
    $( document ).ready(test());

    function test() {
        document.write("And what?");
    }
</script>

• It actually returns the content of the page with "And what?" at the end of it, so it does append the text but why?!

What are the difference between those two functions and how to get the same example with Yahoo YUI?

Answer 1

document ready and document write are not the same thing:

document.ready is a jQuery event that will be triggered after your DOM finish to load. document.write is a native function of JavaScript that will override all the content of your page by the value you send as argument.

The difference between the 2 codes you show is that in the first one you are sending a function as param and in the second one you are sending the result of function as param because you are calling test when you include the braces .

So with your codes the problem is that in 1 you call the function after DOM is ready and in 2 you exec the function at the time you call it.

To have same result in both code you should to remove braces when you send test function as param in the second example:

<script>
    $( document ).ready(test);

    function test() {
        document.write("And what?");
    }
</script>

Besides this little different the 2 results that you are getting are because is the "strange" way that document.write works. Check out the documentation which explains why this happens.

Answer 2

If you call document.write() after the document has finished loading, then the browser will clear your current page and start a new blank page. That is how it is written to work. So this:

<script>
    $( document ).ready(function() {
        document.write("And what?");
    });
</script>

will always clear the page and start a new one with only "And What?" in it.

---

Your second code example would generate the same result if you didn't mistakenly call the test function before $(document).ready() fires. If you did this:

<script>
    $( document ).ready(test);

    function test() {
        document.write("And what?");
    }
</script>

You would get the same result as above.

---

Instead, when you do this:

<script>
    $( document ).ready(test());

    function test() {
        document.write("And what?");
    }
</script>

You're calling test() immediately (it is not waiting for the doc to be ready) and then passing it's return value (which is undefined ) to $(document).ready() .

To pass a function reference so it can be called LATER, you pass only the function's name without parens after it. If you put parens after the name, you are instructing the JS interpret to execute the function right now and pass the return result instead. If you pass only the function's name, you are passing a function reference that the function can then call later.