Javascript function arguments has to be a string?

Question

I'm new to javascript so I'm not sure why it's behaving like this.

I have a clock function:

function updateClock()
{
var currentTime = new Date();

var currentHours = currentTime.getHours();
var currentMinutes = currentTime.getMinutes();
var currentSeconds = currentTime.getSeconds();
var currentMilliseconds = currentTime.getMilliseconds();

// Pad the minutes and seconds with leading zeros, if required
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

// Choose either "AM" or "PM" as appropriate
var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

// Convert the hours component to 12-hour format if needed
currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

// Convert an hours component of "0" to "12"
currentHours = ( currentHours == 0 ) ? 12 : currentHours;

// Update the time display
document.getElementById("clock").innerHTML = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
}

which is in a separate clock.js file. I include that file in the head.

I place this under the clock div:

<script type="text/javascript">
setInterval("updateClock()", 1000);
</script>

And it works. But if I change it to setInterval(updateClock(), 1000);, it won't work. I spent a while trying to figure out why the function only executed once until I found out I needed to put quotes around the function call.

Coming from different languages background, I don't know why you need to put quotes around it? It looks like I'm passing a string "updateClock()" to the function instead of another function. I see other people's code where they just define the whole function as a parameter such as setInterval(function(){ ... }, 1000).

Michael Berkowski · Accepted Answer · 2012-04-20 20:51:32Z

8

setInterval() takes as its first argument

A string of code to be evaluated ('updateClock()') - This is not the preferred use, as it relies on eval(). The string is evaluated as JavaScript code.
A pointer to a function (updateClock) - Note the lack of parens. In JavaScript, a defined function can be referenced, not called, by using its name without (). The pointer can also be an anonymous function as in setInterval(function(){stuff...}, time), which is effectively the same thing as a reference to a defined function -- both point to a function's location in memory, whether or not it has a name.

So in your case, the preferred usage would be:

<script type="text/javascript">
  setInterval(updateClock, 1000);
</script>

Same goes for its cousin setTimeout().

edited Apr 20, 2012 at 20:51

answered Apr 20, 2012 at 20:45

Michael Berkowski

271k47 gold badges450 silver badges395 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

jfriend00 Over a year ago

+1 Nice description of the problem rather than only providing the correct code.

Michael Berkowski Over a year ago

@jfriend00 Answers are different from solutions. I'm careful to provide answers. :)

Ryder Over a year ago

So only for specific functions, I can reference a function without the ()? But otherwise I still use () to make function calls?

jches Over a year ago

I would add that the parameters are evaluated before being passed, so when you say setTimeout(updateClock(), 1000), updateClock is called once, and the return value is passed to setInterval.

jfriend00 Over a year ago

@Ryder - if you want to execute the function now, you put parens on the end. updateClock() executes it right now. If you want to pass a reference to the function to some other function so it can call it later, you do not use the parens setTimeout(updateClock, 1000).

|

gotofritz · Accepted Answer · 2012-04-20 20:45:25Z

1

Have you tried

setInterval( updateClock, 1000);

answered Apr 20, 2012 at 20:45

gotofritz

3,3912 gold badges33 silver badges49 bronze badges

2 Comments

Ryder Over a year ago

I didn't something like that would work. I assumed that calling a function needed () at the end.

gotofritz Over a year ago

Well you are telling setTimeout "this is the function I want you to call" whereas the parenthesis mean "run this function now and pass the result to the setTimeout to run when it's read. If the result is not a function, setTimeout won't be able to do anything with it.

Collectives™ on Stack Overflow

Javascript function arguments has to be a string?

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related