Difference between setTimeout with and without quotes and parentheses

user1316123 picture user1316123 · Apr 25, 2012 · Viewed 428.1k times · Source

I am learning JavaScript and I have learned recently about JavaScript timing events. When I learned about setTimeout at W3Schools, I noticed a strange figure which I didn’t run into before. They are using double quotes and then call the function.

Example:

setTimeout("alertMsg()", 3000);

I know that double and single quotes in JavaScript means a string.

Also I saw that I can do the same like that:

setTimeout(alertMsg, 3000);

With the parentheses it’s referring, without the parentheses it’s copied. When I am using the quotes and the parentheses it’s getting crazy.

I will be glad if someone can explain to me the difference between these three ways of using setTimeout:

With the parentheses:

setTimeout("alertMsg()", 3000);

Without the quotes and the parentheses:

setTimeout(alertMsg, 3000);

And the third is only using quotes:

setTimeout("alertMsg", 3000);

N.B.: A better source for setTimeout reference would be MDN.

Answer

Joseph picture Joseph · Apr 25, 2012

Using setInterval or setTimeout

You should pass a reference to a function as the first argument for setTimeout or setInterval. This reference may be in the form of:

  • An anonymous function

    setTimeout(function(){/* Look mah! No name! */},2000);
    
  • A name of an existing function

    function foo(){...}
    
    setTimeout(foo, 2000);
    
  • A variable that points to an existing function

    var foo = function(){...};
    
    setTimeout(foo, 2000);
    

    Do note that I set "variable in a function" separately from "function name". It's not apparent that variables and function names occupy the same namespace and can clobber each other.

Passing arguments

To call a function and pass parameters, you can call the function inside the callback assigned to the timer:

setTimeout(function(){
  foo(arg1, arg2, ...argN);
}, 1000);

There is another method to pass in arguments into the handler, however it's not cross-browser compatible.

setTimeout(foo, 2000, arg1, arg2, ...argN);

Callback context

By default, the context of the callback (the value of this inside the function called by the timer) when executed is the global object window. Should you want to change it, use bind.

setTimeout(function(){
  this === YOUR_CONTEXT; // true
}.bind(YOUR_CONTEXT), 2000);

Security

Although it's possible, you should not pass a string to setTimeout or setInterval. Passing a string makes setTimeout() or setInterval() use a functionality similar to eval() that executes strings as scripts, making arbitrary and potentially harmful script execution possible.