views:

106

answers:

7

Can anyone tell me why the document ready function needs a call to function first please? I've been told that the setTimeout in the first below example (which does not work) would be evaluated and passed to ready, but I don't see what the difference would be for the function call in the second example (which works)?

$(document).ready(
    setTimeout(
        function(){
            $('#set_3').innerfade({
                animationtype: 'fade',
                speed: 'slow',
                timeout: 3000,
                type: 'sequence',
                containerheight: '180' });
        },
        2000);
);


$(document).ready( 
    function(){  
        setTimeout(
            function(){ 
                $('#set_3').innerfade({  
                    animationtype: 'fade',
                    speed: 'slow', 
                    timeout: 3000, 
                    type: 'sequence', 
                    containerheight: '180' }); 
            }, 
            2000);
    }
);
​
+5  A: 

The latter defines a function that will be called when the document is ready, and passes this as the argument to $(document).ready(). In the former, the argument that is passed to $(document).ready() is the result of evaluating your setTimeout command, so yes, in the first case, the setTimeout call is immediate.

David M
...which can lead to erros if the $('#set_3') element is not loaded after 2 seconds. Generally, first call makes absolutely no sence to me.
Tomasz Struczyński
...in the first case, there is no point for the [`$(document).ready();`](http://api.jquery.com/ready) as it doesn't know what to do with the integer returned by [`setTimeout()`](https://developer.mozilla.org/en/window.setTimeout)
gnarf
+4  A: 

You need to pass a callback to ready(). setTimeout doesn't return a callback, the way you have it it gets executed immediately, and its result passed as an argument to the ready function. That is not what you want.

Just wrap it in a function() { } and it'll work.

Pekka
+2  A: 

jQuery is expecting an anonymous function it can call.

http://api.jquery.com/ready/

Josh
any function would work, doesn't have to be anonymous
Anurag
Saying it needs an anonymous function is somewhat misleading. Doing the following works just fine: `function namedf(){alert("hello"})); $(document).ready(namedef)` While, once passed in, jquery won't call the function by name, that function isn't truly anonymous.
Jamie Wong
A: 

The function you provide is a callback which is executed when the DOM has been ready (the entire page may not be loaded yet).

Chandru
+2  A: 

You need pass in a delegate to the ready function:

$(document).ready(function() {
    // Do something
});

Or simply:

$(function() {
    // Do something
});
Matthew Abbott
+2  A: 

Let's consider a simpler example.

function f (g) {
   g();
}

This function f accepts a function parameter g and calls it. Therefore, we expect g to be a function.

Now

f (alert("Wrong"));

is equivalent to

var param = alert("Wrong");
f(param);

You see, in the first line the alert box (as the statement is evaluated) will be shown and return undefined to param. But f expects a function, not an undefined.

A function is needed. One way is to create one:

function param () { alert("Right"); }
f(param);

But Javascript also supports anonymous functions, in the form

var param = function () { alert("Right"); }
f(param);

Now eliminate the param variable you'll get

f(function () { alert("Right"); });

Corresponding to your question, f is $(document).ready and alert is that setTimeout function.

KennyTM
+1 great explanation bro! ;)
aSeptik
A: 

No, it doesn't work, at least not the same way. Eventhough the timer is started in the first example, it doesn't start when the ready event happens.

In the first example the ready method is called with the result from the setTimeout method. As setTimeout returns a handle for the timeout and not a delegate that the ready method can use, it's the same as:

setTimeout(
    function(){
        $('#set_3').innerfade({
            animationtype: 'fade',
            speed: 'slow',
            timeout: 3000,
            type: 'sequence',
            containerheight: '180' });
    },
    2000);

$(document).ready();

So, the setTimeout method is called immediately, and the call to ready has no effect at all.

Guffa