Changing Javascript Counter From Seconds To Milliseconds

StackOverflow https://stackoverflow.com/questions/18199084

Question

So I was fiddling around with this code I found a week ago due to its ability to 'somewhat' accomplish the look of what the old gmail file counter did. I've failed to make the counter accurately increase at a faster speed other than per seconds.

By editing the lowest 1000 [found at setTimeout(function(){thisobj.start()}, 1000) ] in the code the counter counts up much faster but when refreshed it reverts back to near where it started with an additional second or two (depending on the time from start to refresh).

<html>
<head>
    <script type="text/javascript">
        function countup(startingdate, base) {
            this.currentTime = new Date();
            this.startingdate = new Date(startingdate);
            this.base = base;
            this.start();
        }

        countup.prototype.oncountup = function(){};

        countup.prototype.start = function() {
            var thisobj = this,            
                timediff = (this.currentTime-this.startingdate) / 1000,
                secondfield = Math.floor((timediff));
                result = { seconds: secondfield };

            this.currentTime.setSeconds(this.currentTime.getSeconds() + 1);
            this.oncountup(result);

            setTimeout(function(){
                thisobj.start();
            }, 1000);
        };
    </script>
</head>

<body>
    <div id="holder"></div>

    <script type="text/javascript">
        var startDate = new countup("August 3, 2013 18:59:00", "seconds") // Change starting Date Here

        startDate.oncountup= function(result) {
            var mycountainer = document.getElementById("holder");
            mycountainer.innerHTML =+ result['seconds'];
        }
    </script>
</body>
</html>

I'm fairly certain that this can be changed to count by milliseconds thus increasing at a faster speed that a certain amount per second.

Thanks in advance!

Was it helpful?

Solution

In this line: 

this.currentTime.setSeconds(this.currentTime.getSeconds() + 1);

the code update its currentTime, setting it one second forward. The function is executed every second, so this effectly works like it's getting the current time.

If you change it to run ever .5 seconds, it would advance the seconds twice as fast as it should, causing it to regress when you refresh the page. If you let it run for 3 seconds, it would add 6 seconds instead, so if you reload it then the clock would seem to go back 3 seconds when getting the current time.

For some reason, the code doesn't get the current date by calling new Date() instead (Performance? Memory management?), so you'll have to change how it moves the currentTime forward to fix the bug, making increments in milliseconds instead of seconds, like this:

    this.currentTime.setMilliseconds(this.currentTime.getMilliseconds()+500);
    var timediff=(this.currentTime-this.startingdate)/500;
    var secondfield=Math.floor((timediff));
    var result={halfSeconds:secondfield};
    this.oncountup(result);
    setTimeout(function(){thisobj.start()}, 500);

That will make it increment by 1 every .5 seconds.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top