System clock timer with Javascript

Question

I'm trying to use the system clock to make a simple animation in Javascript. I want to cycle through an array so that [0],[1],[2]... are called at 500ms intervals. Using an example from a previous Stack Overflow answer I was experimenting with this code snippet:

function timer(time,update,complete) {
    var start = new Date().getTime();
    var interval = setInterval(function() {
        var now = (time*1000)-(new Date().getTime()-start);
        if( now <= 0) {
            clearInterval(interval);
            complete();
        }
        else update(Math.floor(now/1000));
    },500); // the smaller this number, the more accurate the timer will be
}

The function is then called using the following approach:

timer(
    5, // seconds
    function(timeleft) { // called every step to update the visible countdown        
        console.log(3 - timeleft );
    },
    function() { // what to do after
        console.log("Timer complete!");
    }
);

This produces, 0,1,2,3,"Timer Complete". However, I can't figure out how this can be called at 500ms intervals. I've tried tweaking the numbers, but I realize that I don't fully understand how this function works. Is it possible to adjust this, or are there some hard coded browser functions that are being called here on the 1s interval?

I tried changing all of the values to the following:

function timer(time,update,complete) {
    var start = new Date().getTime();
    var interval = setInterval(function() {
        var now = (time*500)-(new Date().getTime()-start);
        if( now <= 0) {
            clearInterval(interval);
            complete();
        }
        else update(Math.floor(now/500));
    },500); // the smaller this number, the more accurate the timer will be
}

timer(
    5, // seconds
    function(timeleft) { // called every step to update the visible countdown        
        console.log(5 - timeleft );
    },
    function() { // what to do after
        console.log("Timer complete!");
    }
);

This now produces:

2
3
4
5
Timer complete!

at what I think are 500ms intervals, but I'm not sure. Changing the value 5 in 5 - timeleft also does strange things to the speed at which this runs.

The console output I see is http://i.stack.imgur.com/KqyKx.png (see http://jsfiddle.net/Fcj4r/). So it starts at -1 then logs each number from 0 to 3 *twice*, then 3, then finishes. Seems to be running at 500ms, but your math makes it output some values twice. — bfavaretto, Apr 23 '13 at 03:50
Strange, maybe I'm missing something but I get the output `0 1 2 3 Timer complete!` (there are no '2's saying that the output is repeated) — djq, Apr 23 '13 at 03:57
The code on the question you linked seems to be what you want; why did you alter it? What are you trying to achieve that is different from what that does? — bfavaretto, Apr 23 '13 at 04:00
I still have not quite got it. I want to ensure that the values `0,1,2,3` are being produced at a 500ms interval. Changing the 100 to 500 does not do this, as far as I can tell. — djq, Apr 23 '13 at 04:33
I believe you should forget that code, and try to explain to us exactly what you're trying to achieve. Tip: if you're looking for precision, and want something every 500ms, you'll have to use a timer interval that is less than 500ms. And here is a good explanation of how timers work in js: http://ejohn.org/blog/how-javascript-timers-work/ — bfavaretto, Apr 23 '13 at 17:53

score 0 · Answer 1 · answered Apr 23 '13 at 14:09

I believe you're overcomplicating this. If all you want is to display each item from an array every 500ms, use a regular counter, not timestamps and rounding:

function timer(myArray) {
    var counter = 0;
    var interval = setInterval(function() {

        // There are still items we want to display
        if(counter < myArray.length) {
            console.log(myArray[counter]);

        // We have displayed all 
        } else {
            console.log('Finished');
            clearInterval(interval);
        }

        // Increment counter
        counter++;

    }, 500); // 500 here is the interval in msec
}

var arr = ['Item 0', 'Item 1', 'Item 2', 'Item 3'];
timer(arr);

http://jsfiddle.net/AE58p/

Thanks for your help. My reason for wanting to use timestamps is to ensure that if something takes a long time to render that it does not through off the subsequent times (this has been my experience to date). — djq, Apr 23 '13 at 17:14
JavaScript timers are not precise, you're right. But then I don't understand exactly what you're trying to do. — bfavaretto, Apr 23 '13 at 17:22

System clock timer with Javascript

1 Answers1