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>

score 7 · Accepted Answer · edited May 23 '17 at 12:03

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).

Thanks a lot. This and your other post were very helpful. – Curious2learn Dec 16 '11 at 12:08 — Curious2learn, Dec 16 '11 at 12:08

jfriend00 · Answer 2 · 2011-12-16T04:31:50.027

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.

Thanks jfriend00. Appreciate your response. – Curious2learn Dec 16 '11 at 12:08 — Curious2learn, Dec 16 '11 at 12:08

can someone please explain what is happening in this javascript code?

2 Answers2