Difference between setTimeout with and without quotes and parentheses
JavascriptSettimeoutJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
setInterval
or setTimeout
Using 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.
Solution 2 - Javascript
i think the setTimeout function that you write is not being run. if you use jquery, you can make it run correctly by doing this :
function alertMsg() {
//your func
}
$(document).ready(function() {
setTimeout(alertMsg,3000);
// the function you called by setTimeout must not be a string.
});
Solution 3 - Javascript
Totally agree with Joseph.
Here is a fiddle to test this: http://jsfiddle.net/nicocube/63s2s/
In the context of the fiddle, the string argument do not work, in my opinion because the function is not defined in the global scope.
Solution 4 - Javascript
What happens in reality in case you pass string as a first parameter of function
> setTimeout('string'
,number
)
is value of first param got evaluated when it is time to run (after number
of miliseconds passed).
Basically it is equal to
> setTimeout(eval('string')
, number
)
This is > an alternative syntax that allows you to include a string instead of a function, which is compiled and executed when the timer expires. This syntax is not recommended for the same reasons that make using eval() a security risk.
So samples which you refer are not good samples, and may be given in different context or just simple typo.
If you invoke like this setTimeout(something, number)
, first parameter is not string, but pointer to a something called something
. And again if something
is string - then it will be evaluated. But if it is function, then function will be executed.
jsbin sample
Solution 5 - Javascript
##If i want to wait for some response from server or any action we use setTimeOut.
functionOne =function(){
console.info("First");
setTimeout(()=>{
console.info("After timeOut 1");
},5000);
console.info("only setTimeOut() inside code waiting..");
}
functionTwo =function(){
console.info("second");
}
functionOne();
functionTwo();
## So here console.info("After timeOut 1"); will be executed after time elapsed.
Output:
*******************************************************************************
First
only setTimeOut() inside code waiting..
second
undefined
After timeOut 1 // executed after time elapsed.
Solution 6 - Javascript
With the parentheses:
setTimeout("alertMsg()", 3000); // It work, here it treat as a function
Without the quotes and the parentheses:
setTimeout(alertMsg, 3000); // It also work, here it treat as a function
And the third is only using quotes:
setTimeout("alertMsg", 3000); // It not work, here it treat as a string
function alertMsg1() {
alert("message 1");
}
function alertMsg2() {
alert("message 2");
}
function alertMsg3() {
alert("message 3");
}
function alertMsg4() {
alert("message 4");
}
// this work after 2 second
setTimeout(alertMsg1, 2000);
// This work immediately
setTimeout(alertMsg2(), 4000);
// this fail
setTimeout('alertMsg3', 6000);
// this work after 8second
setTimeout('alertMsg4()', 8000);
> In the above example first alertMsg2() function call immediately (we > give the time out 4S but it don't bother) after that alertMsg1() (A > time wait of 2 Second) then alertMsg4() (A time wait of 8 Second) but > the alertMsg3() is not working because we place it within the quotes > without parties so it is treated as a string.