Question

In the application I’m building I’m polling for a status update and I have noticed that if the call is made as follows the timeout fires continuously:

setTimeout($.get("http://localhost:8080/status", function(data) { UpdateStatus(data);}), 1000);

While if use a function instead the timeout fires every 1000 ms:

 setTimeout(function() {$.get("http://localhost:8080/status", function(data) { UpdateStatus(data);})}, 1000);

Why?

Answer 1

In the first example, you’re calling $.get and then passing its return value into setTimeout. In the second example, you’re not calling the function at all; you’re giving setTimeout a function that it will call later, which will then call $.get for you.

This is easier to see with a simpler test case:

function test() {
    alert("Hi there!");
}

// WRONG, *calls* `test` immediately, passes its return value to `setTimeout`:
setTimeout(test(), 1000);

// Right, passes a reference to `test` to `setTimeout`
setTimeout(test, 1000);

Note that the first one has parentheses (()), the second one doesn’t.

When you want to pass parameters to the function, you have to do it indirectly by defining another function:

function test(msg) {
    alert(msg);
}

// WRONG, *calls* `test` immediately, passes its return value to `setTimeout`:
setTimeout(test("Hi there!"), 1000);

// Right, passes a reference to a function (that will call `test` when called) to `setTimeout`
setTimeout(function() { test("Hi there!"); }, 1000);