usage of setTimeout function in AJAX

Question

I.m currently following a tutorial about how to load content from a MYSQL db without reloading the page.

I just want to understand the use of setTimeout in this code. What's it for? I tried removing that part and ajax still works. Why would you need to delay a task, isn't ajax meant to be realtime update?

$(document).ready(function () {
    done(); 
});

function done() {
    setTimeout(function () {
        updates();
        done();
    }, 200);
}

function updates() {
    $.getJSON("update.php", function (data) {
        $("ul").empty();
        $.each(data.result, function () {
            $("ul").append("<li>ID: " + this['msg_id'] + "</li><br /><li>ID: " + this['msg'] + "</li><br />");
        });
    });
}

setTimeout reference: developer.mozilla.org/en/docs/Web/API/window.setTimeout — John Dvorak
– John Dvorak, Commented Aug 25, 2013 at 15:28
It's a recursive function that gets executed about five times every second. Without the timeout, it would be executed a million times every second and the browser would crash. — adeneo
– adeneo, Commented Aug 25, 2013 at 15:35

bfavaretto · Accepted Answer · 2013-08-25 15:25:06Z

2

In that code, the setTimeout is being used to get updates from the server 5 times a second (which is probably too frequently). Without it, it only get the updates once (if updates() is ever called).

answered Aug 25, 2013 at 15:25

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

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

Comments

Oscar Barrett · Accepted Answer · 2013-08-25 15:27:56Z

0

The setTimeout appears in the done() function, and when the setTimeout executes (after 200ms) it calls itself recursively. Thus the updates() function will be called every 200ms for the life of the page.

If update.php is some kind of message stream, then this code requires the setTimeout to continuously poll for new messages and append them to a list.

answered Aug 25, 2013 at 15:27

Oscar Barrett

3,28534 silver badges36 bronze badges

Comments

Tushar Gupta - curioustushar · Accepted Answer · 2013-08-25 15:28:09Z

0

settimeout and setTimeout

In your code setTimeout calls done function and updates() function after every 200 millisecond

function done() {
    setTimeout(function () {
        updates();
        done();
    }, 200);
}

like you if you remove setTimeout it still works

  function done() {
            updates();
            done();
    }

as it creates infinite loop of done function

but no delay which was caused by setTimeout

answered Aug 25, 2013 at 15:28

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Comments

pdoherty926 · Accepted Answer · 2013-08-25 15:32:55Z

0

It's being used to delay recursion by 200 ms. If you remove the timeout, the loop will work just the same, but you'll probably run out of memory before too long.

A more interesting/instructive take on this example would be to pass done to updates as a callback and call it on success.

answered Aug 25, 2013 at 15:32

pdoherty926

10.6k5 gold badges47 silver badges75 bronze badges

Comments

John Dvorak · Accepted Answer · 2013-08-25 15:33:27Z

0

The function setTimeout takes a function and a number as parameter, it executes the function after the given number of milliseconds.

In your code it means: the function updates() is called every 200 milliseconds - 5 times a second.

Read more about it here: https://developer.mozilla.org/en/docs/Web/API/window.setTimeout

edited Aug 25, 2013 at 15:33

John Dvorak

27.4k13 gold badges73 silver badges86 bronze badges

answered Aug 25, 2013 at 15:28

Tuxes3

4472 silver badges20 bronze badges

Comments

mplungjan · Accepted Answer · 2013-08-27 06:33:53Z

0

Your code uses setTimeout to poll regardless of the resource returning a result.

This version will only re-execute in case of success.

Of course if you want your code to poll always, regardless so it can recover from an error at the server, you should not change. But 200 MS is in any case far too often

$(function () {
  updates(); 
});


function updates() {
    $.getJSON("update.php", function (data) {
        $("ul").empty();
        $.each(data.result, function () {
            $("ul").append("<li>ID: " + this['msg_id'] + "</li>"+
                           "<li> " + this['msg'] + "</li>");
        });
        setTimeout(updates, 10000); // do it again in 10 seconds
    });
}

edited Aug 27, 2013 at 6:33

answered Aug 25, 2013 at 15:35

mplungjan

180k29 gold badges183 silver badges246 bronze badges

1 Comment

mplungjan Over a year ago

Whoever downvoted this and left no comment is more than unhelpful.

Collectives™ on Stack Overflow

usage of setTimeout function in AJAX

6 Answers 6

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related