A changing rate clock in jquery

Question

novice here, working through a project i'm trying to build for a piece of educational multimedia in science.

I has a scenario where students are asked to record the temperature on a scale very minute for ten minutes.

i don't want them to waste ten minutes watching so i wish to display a clock on screen that will go slow for the first 5 seconds of every minute, speed up for 50 seconds then a normal rate again for the last 5 seconds.....

What I have achieved with very basic code is as follows

<div class="timer">
<span class="minute">00</span>:<span class="second">00</span>
</div>

and the script

function gotimer()
{
var time = 0;
var timer_id;   
var rate = 1000;

function check(){
    if ( secondcount <= 5) {
    console.log("under")
    rate = 1000;
    console.log("rate" + rate)
    }
    else if ( secondcount >= 6 &&  secondcount <= 54 ) {
    console.log("between")
    rate = 300;
    console.log("rate" + rate)
    }
    else if ( secondcount >= 55 ) {
    console.log("between")
    rate = 1000;
    console.log("rate" + rate)
    }
}


timer_id = setInterval(function()
        {

            //console.log($('.second').text())
            secondcount = parseInt($('.second').text()); 
            console.log(secondcount)
            time++;
            generateTime();
            check();

        }, rate);

this.getTime = function()
{
    return time;
}

function generateTime()
{
    var second = time % 60;
    var minute = Math.floor(time / 60) % 60;

    second = (second < 10) ? '0'+second : second;
    minute = (minute < 10) ? '0'+minute : minute;

    $('div.timer span.second').html(second);
    $('div.timer span.minute').html(minute);
    }
}

var timer;

$(document).ready(function(e) 
{
timer = new gotimer
});

I have worked at it a few days and I get a changing console log but no change in rate. I know my coding is far from good any any suggestions would be greatly appreciated.

score 0 · Accepted Answer · answered Aug 22 '14 at 15:42

0

You need to use setTimeout instead of setInterval. The function called by setTimeout is then responsible for calling the next 'tick' of the timer.

jsFiddle: http://jsfiddle.net/8wrc5aht/

timer_id = setTimeout(timerTick, rate);

function timerTick() {
    secondcount = parseInt($('.second').text());
    time++;
    generateTime();
    check();
    setTimeout(timerTick, rate);
}

answered Aug 22 '14 at 15:42

Sam

895
1
8
26

Thank you so much, my first question.... this all works very quick!!!! thats works perfect and i appreciate the help for what i see now was a silly question! – Cathal Rice Aug 22 '14 at 15:58

score 0 · Answer 2 · edited May 23 '17 at 10:33

There is lots of information on this in this question.

One way of doing it is like this:

timer_id = setInterval(doStuff, rate);

function doStuff() {
    secondcount = parseInt($('.second').text());
    time++;
    generateTime();
    check();

    clearInterval(timer_id); //Clear the current interval
    timer_id = setInterval(doStuff, rate); // set it again with the new rate
}

Here is a JSFiddle.

A changing rate clock in jquery

2 Answers2