CODEWITHSUNDEEP
javascriptjquery
Darren Tarrant
Darren Tarrant

Reputation: 11

jQuery ready function

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);
    }
);
​

Upvotes: 1

Views: 1312

Answers (7)

Guffa
Guffa

Reputation: 700232

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.

Upvotes: 0

kennytm
kennytm

Reputation: 523214

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.

Upvotes: 3

Pekka
Pekka

Reputation: 449395

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.

Upvotes: 4

Matthew Abbott
Matthew Abbott

Reputation: 61589

You need pass in a delegate to the ready function:

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

Or simply:

$(function() {
    // Do something
});

Upvotes: 2

Chandra Sekar
Chandra Sekar

Reputation: 10843

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

Upvotes: 0

Josh
Josh

Reputation: 1281

jQuery is expecting an anonymous function it can call.

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

Upvotes: 2

David M
David M

Reputation: 72850

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.

Upvotes: 6

Related Questions