Quotations on function

Question

Just got a short question, pretty straightforward, try simplify the answer as I am a novice when it comes to JS. Question is, why does the function inside the setTimeout require " " to function as intended, meaning that it fires itself every 5 seconds

var pal = document.getElementById("pal");
c=0;

function Tr(){
    pal.innerHTML=c;
    c=c+1;
    setTimeout("Tr()", 5000);
}

Amit Joki · Answer 1 · 2014-05-04T10:27:04.233

1

It doesn't require it to be in quotes. But if it is in quotes, then it is evaled which is bad. But if it is in quotes it needs () but if it isn't a string then it shouldn't have it.

You can simply do this:

setTimeout(Tr, 5000);

setTimeout recieves function to execute as its argument. If it is passed by function's name, then it directly called, but if it if given a string, it will evaluate it by using eval.

Don't use strings as it uses eval which is evil!!!

edited May 04 '14 at 10:27

answered May 04 '14 at 10:20

Amit Joki

58,320
7
77
95

While this is technically correct, you might want to add more explanation. Very short answers are not particularly useful. (didn't downvote, but I did see your first revision) – John Dvorak May 04 '14 at 10:22
What do you mean by exagerration? I am talking about explanation. A single very short sentence that the asker might not even be able to understand is not really a useful answer. – John Dvorak May 04 '14 at 10:24
2

The first revision of this answer, which was only what's now the first paragraph, was factually incorrect. If you just remove the quotes you end up with `setTimeout( Tr(), 5000 );` which is wrong. – JJJ May 04 '14 at 10:27

score 1 · Answer 2 · edited May 23 '17 at 11:50

Because in contrary to other languages, like c#, you cannot pass a function call with parameters as parameter in JavaScript. You can pass a parameterless function though.

You pass in a string containing the parametrized function call or multiple functions you want to execute and the engine evaluates that at runtime.

See setTimeout - how to avoid using string for callback? to see it is possible to use a parameterless function as parameter.

h2ooooooo · Accepted Answer · 2014-05-04T10:26:10.577

1

It doesn't, and in fact using it in quotes is not recommended as it uses eval().

The MDN defines window.setTimeout as the following:

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);    
var timeoutID = window.setTimeout(code, delay);

where
timeoutID is the numerical ID of the timeout, which can be used later with window.clearTimeout().
func is the function you want to execute after delay milliseconds.
code in the alternate syntax is a string of code you want to execute after delay milliseconds (using this syntax is not recommended for the same reasons as using eval())

Hence using functions

setTimeout(Tr, 5000)

and

setTimeout(function() { Tr(); });

would both work just as fine.

The latter with an anonymous function is used if you want to use parameters in your call - eg.:

var foo = 'bar';
setTimeout(function() { Tr('foo' + foo); }); // Will call Tr('foobar')

The reason why

setTimeout(Tr(), 5000)

does not work is because it first executes Tr() and then calls setTimeout with the result. If Tr() returned the string 'foo', this call would call setTimeout('foo', 5000) which makes no sense.

edited May 04 '14 at 10:26

answered May 04 '14 at 10:21

h2ooooooo

39,111
8
68
102

Thanks, I think I got the difference now. :) Though I never came across the possibility of using the function as just writing in this example Tr, for some reason I thought you had to always write it Tr(). – Eddie Nowayjosé May 04 '14 at 11:06
@EddieNowayjosé Using a string is essentially the same as doing `setTimeout(function() { eval('Tr()') }, 5000)`. :) Think of `Tr` just being a variable representing a function - sort of like `var foo = 'bar'; alert(foo)` would represent the *value* (or in the other case, a *function*) associated with the variable `foo`. – h2ooooooo May 04 '14 at 11:17
Not sure what eval() does, but I think I understand what you mean though. So does that mean that using Tr would only work to start a function when its used as a parameter inside another function? If I try "onclick="Tr" it does not work. Or is there any other instances where you would need to use Tr instead of Tr(), other then what we talked about already. – Eddie Nowayjosé May 04 '14 at 11:26
In the instance of your `onclick` it's similar to simply making a javascript call which is `Tr`, but `onclick` expects a string (`hence Tr()`). `eval()` *evalutates* a string. `eval('1 + 2 + 3')` would *evaluate* the expression and return `6`. It should almost never be used, as you'd be fine with javascript alone. The cases it could work (but shouldn't, as it's dangerous to allow users to execute their own code) would be math. I could type in a string of `1 + 6 - 2` and javascript could turn it into javascript code for me. There's several other threads explaining *why* it's dangerous. – h2ooooooo May 04 '14 at 11:38
The only other thing I can think of using `Tr` is if you were making an alias. `var Rt = Tr;` would now make `Rt();` execute the `Tr()` function. – h2ooooooo May 04 '14 at 11:39

score 0 · Answer 4 · answered May 04 '14 at 10:23

0

setTimeout accepts a function object. So you need to call it without the quotes and the function call parenthesis.

setTimeout(Tr, 5000);

answered May 04 '14 at 10:23

Zero Fiber

4,417
2
23
34

Quotations on function

4 Answers4