Live age display

Question

I'm trying to display a live time elapsed on a page

So I have this function which calculates the exact time elapsed to the second, and when called, it updates the HTML node with this time. It seems woefully inefficient to use a setInterval to call this function every second to update the display. Can anyone suggest a better solution? Many thanks

$scope.getAge = function(){
            var today = new Date();
            var birthDate = new Date("1980-05-30T04:00:00");
            var bdInMilis = birthDate.getTime();         
            var todayInMilis = today.getTime();

            var timeAlive = todayInMilis - bdInMilis;
            timeAlive = timeAlive/1000;

            var numyears = Math.floor(timeAlive / 31536000);

            var numdays = Math.floor((timeAlive % 31536000) / 86400); 

            var numhours = Math.floor(((timeAlive % 31536000) % 86400) / 3600);

            var numminutes = Math.floor((((timeAlive % 31536000) % 86400) % 3600) / 60);

            var numseconds = Math.floor((((timeAlive % 31536000) % 86400) % 3600) % 60);

            var ageNode = document.getElementById("age-node");

            if(ageNode){

                ageNode.innerHTML = ("I am "+numyears+ " years, " + numdays + " days, " + numhours + " hours, " + numminutes + " minutes, " + numseconds + " seconds old (give or take)");

                // can't keep doing this calculation every second
                //$scope.refreshTime();

            }
       };

You could, for starters, move the first 3 variables outside of the method; they're not going to be any different each time. Also, on a different note. Please look at doing directives. You should never interact with the DOM in a controller :) — Darren Wainwright, Aug 06 '15 at 13:22
assuming you meant `setTimeInterval` and not `setTimeout` I can't think of any way to get a clock in JavaScript without using either of those two methods. I would be extremely curious if someone does! — Shaunak, Aug 06 '15 at 13:46

score 0 · Answer 1 · edited May 23 '17 at 12:06

When you want a period of time using setInterval is better then timeouts (check this)

Also you're using angularjs, don't bind your string with innerHTML.

<div>{{age}}</div>
...
$scope.getAge = function(){
    var today = new Date();
    var birthDate = new Date("1980-05-30T04:00:00");
    var bdInMilis = birthDate.getTime(); 

    setInterval(function(){
        var todayInMilis = today.getTime();
        var timeAlive = todayInMilis - bdInMilis;
        timeAlive = timeAlive/1000;
        var numyears = Math.floor(timeAlive / 31536000);
        var numdays = Math.floor((timeAlive % 31536000) / 86400); 
        var numhours = Math.floor(((timeAlive % 31536000) % 86400) / 3600);
        var numminutes = Math.floor((((timeAlive % 31536000) % 86400) % 3600) / 60);
        var numseconds = Math.floor((((timeAlive % 31536000) % 86400) % 3600) % 60);
        $scope.age = "I am "+numyears+ " years, " + numdays + " days, " + numhours + " hours, " + numminutes + " minutes, " + numseconds + " seconds old (give or take)";
    },1000);
};

I think question is about if there is a way to not use `set a timeout` (and `setTimeInterval` I am assuming) any other suggestions should go in comments .. — Shaunak, Aug 06 '15 at 13:41

Live age display

1 Answers1