0

I use document ready all the time, but I'm watching some tutorial videos to really KNOW whats going on instead of just knowing from typing it so much.

I had always put it in an anonymous function out of habit as thats how its always done, but now I see if its NOT in an anonymous function (say alert(); for instance), it will execute NOT when the DOM is loaded but immediately when that javascript loads. It must be in an anonymous function for this to happen how its supposed to (when the whole page loads) and the event listeneter triggers that its 'ready'.

Why is this?

furthermore I often see something like function(i){}(i), what does this mean?

Tallboy
  • 12,847
  • 13
  • 82
  • 173

3 Answers3

5

In this answer, I'm going to use the shorthand for $(document).ready(...), which is $(...), provided that a function is passed.

The function doesn't have to be anonymous; you can write this for example:

function doStuff() {
}

$(doStuff);

I think what you mean is if you try this:

$(alert('Yo!'));

It will indeed alert right away. This is because a function is expected, and alert() is a function call. This, on the other hand, would work (albeit strangely):

$(alert);

For your second question, what function(i){}(i) does is declare a function object with one parameter, then immediately run it with a provided argument. This is a useful way to use an object without needing it to be global and without it needing to have a certain name. For example, this:

(function($) {
    // Do stuff with $
})(jQuery);

Lets you alias jQuery as $.

Jacob
  • 77,566
  • 24
  • 149
  • 228
  • What does the initial ( mean before function($) in your last example? – Tallboy May 19 '12 at 22:59
  • It's just a stylistic thing. It could be rewritten as `function($){}(jQuery)` as well. See http://stackoverflow.com/a/939412/119549. – Jacob May 20 '12 at 01:58
3

Well, it's the way JavaScript works:

$(document).ready(alert('x')); would execute alert('x') and pass its return value to $(document).ready(). This obviously makes no sense - you want the code to be executed when the DOM is ready. So you pass a function containing that code to $(document).ready() - and jQuery will execute all functions passed to that function as soon as the DOM is ready.

(function(i){})(i); is a way to create a new variable in a new scope. This is necessary when you are creating callbacks inside a loop and want the current value of the loop variable.

In case you are talking about the anonymous function which sometimes wraps jQuery code in the first part of your question, i.e. (function($){ /* code here *= })(jQuery); - this is used to allow $ to be used even if it does not point to jQuery in the global scope. It's similar to what I mentioned in the previous paragraph, just used for a different purpose.

ThiefMaster
  • 310,957
  • 84
  • 592
  • 636
  • You didn't mention that you can pass a named function to the the ready function. +1 anyway. – gdoron May 19 '12 at 23:19
1

When you do 

$(alert())

Its equivalent to 

var alertresult = alert()
$(alertresult);

in this case, it is clear that the alert runs immediately. If you want to pass the function itself you need to avoid calling it:

$(alert)

As for the function(i){ dosomething }(somevalue) thing it is basically a shiort version of 

(function(){
    var i = somevalue;
    dosomething;
}());

that is, you can use the variable "i" inside of the dosomething bit. The reason for wraping the code in an immediately invoked function is tha tthis make the i variable into a local variable accessible only on your function, so that it cannot clash with other global variables and it cannot be overwriten by other functions.

hugomg
  • 68,213
  • 24
  • 160
  • 246