setTimeout callback argument

Question

Let's consider this piece of JavaScript:

function Person(name) {
 this.name = name;
}
Person.prototype.showName = function() {
 alert(this.name);
}
var mike = new Person("mike");
//mike.showName(); 
window.name = "window"; 

I don't understand the difference between the behavior of

setTimeout(mike.showName(), 5000);

and

setTimeout(function(){
 mike.showName();
}, 5000);

Why is the behavior different? It really confuses me. Thanks.

• Wayne: I'm fairly certain the OP means "behavior" when he says "performance".

Answer 1

Your question really has nothing at all to do with setTimeout. You simply need to understand the difference between a function call and a reference to a function.

Consider these four assignments:

var one = function() { mike.showName(); };
var two = mike.showName;
var three = mike.showName();
var four = (function() { mike.showName(); })();

The first two assign a reference to a function to their respective variables. The last two, however, call functions (that's what the parens are for) and assign their return values to the vars on the left-hand side.

How this relates to setTimeout:

The setTimeout function expects as its first argument a reference to a function, so either one or two above would be correct, but three and four would not. However, it is important to note that it is not, strictly speaking, a mistake to pass the return value of a function to setTimeout, although you'll frequently see that said.

This is perfectly fine, for example:

function makeTimeoutFunc(param) {
 return function() {
 // does something with param
 }
}
setTimeout(makeTimeoutFunc(), 5000);

It has nothing to do with how setTimeout receives a function as its argument, but that it does.

• jsnewman: Thanks a lot man. Your answer is great. However I still have one confusion. Could you tell me why 'mike.showName()' would be executed first while 'function(){ mike.showName()' waits its 5 seconds? Thanks again.
• Wayne: @jsnewman - Passing mike.showName() says to run the function showName right now and pass whatever it returns as the callback to be executed in 5 seconds (which is nothing). However, passing function(){ mike.showName() } provides setTimeout with an anonymous function to run five seconds from now. Five seconds go by and the outer wrapper function is executed. It contains one line, which is the call to showName, which is executed at that time.

Answer 2

If the accepted answer is just too long to read:

setTimeout(mike.showName(), 5000);

This will execute whatever mike.showName() returns after 5,000 milliseconds.

setTimeout(function(){ mike.showName(); }, 5000);

This will execute anonymous function after 5000 milliseconds that calls mike.showName() , the actual function.

Another way to achieve same effect:

setTimeout(mike.showName.bind(mike), 5000);

Answer 3

It's not a performance issue. One of the ways you showed simply doesn't work (it calls the function immediately instead of when the timeout fires).

setTimeout(mike.showName(), 5000); will execute the showName function and sets its return value as the timeout callback which won't work.

setTimeout(function(){ mike.showName(); }, 5000); creates an anonymous function and sets this as the timeout callback. When the timeout fires, the function is called and calls your showName() function.

Fyi, setTimeout('mike.showName();', 5000); would also work. But don't do that - it's just as bad as using eval(). Besides that it makes your code less readable since the code in the string cannot be syntax-highlighted.

• jsnewman: Could you tell me why 'mike.showName()' would be executed first while 'function(){ mike.showName()' waits its time? Thanks a lot.
• ThiefMaster: Because you actually call the function in that line. If you wrap it in an anonymous function or just pass the function without () it's not called - the function itself is passed.

Answer 4

setTimeout(mike.showName(), 5000); executes mike.showName() immediately and passes the return value to setTimeout()

setTimeout(function(){ mike.showName(); }, 5000); passes a pointer to the function instead. That way setTimeout can execute the function, rather than it's return value.