Question

新手在这里，通过一个项目，我试图建立一个科学的教育多媒体。

我有一个场景，要求学生以十分钟的分钟记录温度。

我不希望他们浪费十分钟观看，所以我希望在屏幕上显示一个时钟，在每分钟的前5秒内会变慢，加速50秒然后再恢复正常速度最后5秒.....

我用非常基本的代码所取得的成就如下

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

和脚本

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
});

我已经工作了几天，我得到了一个不断变化的控制台日志，但速率没有变化。我知道我的编码远非好，任何建议都会非常感激。

Answer 1

您需要使用setTimeout代替setInterval。然后setTimeout调用的函数负责调用下一个＆＃39; tick＆＃39;计时器。

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

timer_id = setTimeout(timerTick, rate);

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

Answer 2

this question中有很多相关信息。

这样做的一种方式是：

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
}

这是JSFiddle。

jquery中的变化率时钟

2 个答案: