CODEWITHSUNDEEP
javascript
Curious2learn
Curious2learn

Reputation: 33648

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

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>

Upvotes: -1

Views: 116

Answers (2)

Dave Newton
Dave Newton

Reputation: 160301

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

Upvotes: 7

jfriend00
jfriend00

Reputation: 708026

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.

Upvotes: 2

Related Questions