Changing Javascript Counter From Seconds To Milliseconds

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!

This should either be trivial or be a lot of work if you had originally wrote the code. The browsers won't be able to keep up with your requirements, however. — John Dvorak, Aug 13 '13 at 01:28
This question appears to be off-topic because it is about modification of asker's code (not useful to future readers) — John Dvorak, Aug 13 '13 at 01:32

score 0 · Accepted Answer · answered Aug 13 '13 at 03:37

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.

Changing Javascript Counter From Seconds To Milliseconds

1 Answers1