can someone please explain what is happening in this javascript code?
Question
I want the browser to display the seconds since it was last refreshed. I don't understand why Code 1 does not work; Code 2 does; If code 1 does not work why does code 3 work? The setInterval call is similar in CODE 1 and CODE 3. The way the function is defined is different. But it is not clear to me why that is making a difference.
Thanks very much for your help. I have just started learning JavaScript.
CODE 1
<html>
<head>
<title>Time Since Refresh</title>
</head>
<body>
<br/>
<br/>
<span id="timeSinceStart"></span>
<script language="JavaScript">
var timeRefreshed = new Date();
function displayTimeSinceStart(){
var now = new Date();
//compute elapsed time
var elapsed = Math.round((now - timeRefreshed)/1000);
document.getElementById("timeSinceStart").innerHTML = "Time Elapsed: " + elapsed + " seconds.";
}
// Update seconds counter
setInterval(displayTimeSinceStart(), 1000);
</script>
</body>
</html>
CODE 2 Same as CODE 1, except the setInterval() function is written as
setInterval("displayTimeSinceStart();", 1000);
CODE 3
<html>
<head>
<title>Time Since Refresh</title>
</head>
<body>
<br/>
<br/>
<span id="timeSinceStart"></span>
<script language="JavaScript">
var timeRefreshed = new Date();
var timeSinceStart = {
displayTimeSinceStart: function(){
var now = new Date();
//compute elapsed time
var elapsed = Math.round((now - timeRefreshed)/1000);
document.getElementById("timeSinceStart").innerHTML = "Time Elapsed: " + elapsed + " seconds.";
}
}
// Update seconds counter
setInterval(timeSinceStart.displayTimeSinceStart, 1000);
</script>
</body>
</html>
2 answers
solution1
7 ACCPTED 2011-12-16 03:10:35
Code 1 calls displayTimeSinceStart (because of the "()" ) instead of passing a reference to it: setInterval gets the return value of that function ( undefined ). Drop the parentheses to fix.
Code 2 passes a string for setInterval to evaluate: the parens are required since you want the method to be called when the interval times out.
Code 3 passes a reference, equivalent to Code 1 without the "()" , so it works.
setInterval expects a function reference (preferred), or a string that will be evaluated.
More details (including why sometimes a method call as a parameter to setTimeout makes sense) .
solution2
2 2011-12-16 03:20:02
In code 1 , change this line:
setInterval(displayTimeSinceStart(), 1000);
to this:
setInterval(displayTimeSinceStart, 1000);
and it should update your time, once a second. You can see the fixed version work here: http://jsfiddle.net/jfriend00/sL7HN/ .
In code 2 , you are passing a string that will be sent to eval() upon each timer tick and that will correctly call the desired function. This is not a desirable way to code. Much better to just pass a reference to the function direction and not use a string and eval() .
In code 3 , you are passing a function reference (like my fixed version of code 1) that happens to be a property of an object so the function will be called on each timer tick.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.