Calling a function inside itself using setTimeout

Question

I want to call a function within itself like this:

$(document).ready ( 

    function ready() {
        var tester = $.ajax({
                async: false,
                url: "test_parse.php"
            }).responseText;
        document.getElementById('test').innerHTML = tester;
        setTimeout(ready(), 3000); 
   }
    
);

But every time I do this my browser just keeps loading and eventually Apache shuts down (obviously not my expected result). Could you help me to figure out a solution?

also I don't think it's correct to put functions inside $(document).ready({}); — Devin Crossman
– Devin Crossman, Commented Sep 10, 2011 at 4:50
@Devin - document.ready expects a function expression as a parameter; it doesn't matter whether said function has a name. (Before anyone points it out, I know that a function expression is not the only option, but I think it is the most commonly used option.) — nnnnnn
– nnnnnn, Commented Sep 10, 2011 at 5:26
Keep in mind that named function expressions have many quirks and issues associated with them (including browser bugs and even memory leaks), so I'd avoid using them in production code. — josh3736
– josh3736, Commented Sep 10, 2011 at 5:59

Joe · Accepted Answer · 2011-09-10 04:51:03Z

11

setTimeout takes a function reference:

setTimeout(ready, 3000);

not

setTimeout(ready(), 3000);

And that being said, I would also do this:

$(document).ready ( 

    function ready() {
        var tester = $.ajax({
                url: "test_parse.php",
                success: function (data) {
                    document.getElementById('test').innerHTML = data;
                    setTimeout(ready, 3000); 
                }
            })
   }

);

Because async: false will lock up the browser until that data returns from the server

answered Sep 10, 2011 at 4:51

Joe

82.8k18 gold badges130 silver badges147 bronze badges

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

4 Comments

Travis Webb Over a year ago

maybe he put async:false there for a legitimate reason?

Travis Webb Over a year ago

It seems that he wants to make a synchronous request... do you have a problem with this?

josh3736 Over a year ago

@Travis: There is no good reason to make a synchronous XHR request. 8.4% of reported IE9 hangs last month were due to synchronous XHR. It's bad user experience; there's no reason that what the OP is trying to do can't be accomplished in a success callback function.

ZurabWeb Over a year ago

Why would you put function inside $(document).ready() ? Why would you use $(document).ready() instead of $(function) {}; ?

Travis Webb · Accepted Answer · 2011-09-10 04:51:32Z

7

This is wrong:

setTimeout(ready(), 3000);

This is right:

setTimeout(ready, 3000);

ready() is actually invoking the function. ready is simply a reference to the function, which is what you want.

answered Sep 10, 2011 at 4:51

Travis Webb

15k9 gold badges59 silver badges112 bronze badges

1 Comment

Vivek Over a year ago

Awesome! Thanks. I knew it was something small.

Ian Hill · Accepted Answer · 2011-09-10 05:01:39Z

setTimeout expects a function reference as the first parameter, you have a function invocation which is passing the result of calling ready().

This is causing an infinite loop.

You need to pass in "ready", not "ready()"

setTimeout(ready, 3000);

And if you're trying to queue ajax requests that happen in a structured order, you'll want to fire the setTimeout on success after the previous ajax call, not immediately, otherwise you'll have ajax results returning and updating at arbitrary intervals depending on how the server responds to each request.

$.ajax({
    // your ajax settings
}).success(function () {
    // fire off the next one 3 secs after the last one completes
    setTimeout(ready, 3000);
});

This is better than using the async: false setting, which blocks the browser.

lowe_22 · Accepted Answer · 2011-09-10 04:52:23Z

0

Why are you trying to call the function within itself? Surely all you need to do is move setTimeout outside of the function, then call ready() every 3000ms? What'l do you want your output to be?

answered Sep 10, 2011 at 4:52

lowe_22

3951 gold badge6 silver badges14 bronze badges

1 Comment

mu is too short Over a year ago

ready() calls itself (via the success callback) so that things won't get backed if one of the $.ajax calls takes too long. I tend to use this approach instead of setInterval precisely to keep things nicely in sequence and not backed up.

Collectives™ on Stack Overflow

Calling a function inside itself using setTimeout

4 Answers 4

4 Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related