jQuery进度计时器栏

Question

我在jQuery中有一个进度计时器栏 - 这是一个例子http://jsfiddle.net/6h74c/

如果我有时间值,以毫秒为单位(600000 = 10分钟,300000 = 5分钟等),如何在该段时间内增加条形图？

在jsfiddle链接中,我正在尝试将进度条设置为增加835000ms.

但是,setTimeout()决定了条形图增加的频率,它也是基于宽度百分比,这似乎不准确 - 我应该这样做吗？

function updateProgress(percentage) {
    $('#pbar_innerdiv').css("width", percentage + "%"); // probably not ideal
    $('#pbar_innertext').text(percentage + "%");
}

function animateUpdate() {
    perc++;
    updateProgress(perc);
    if(perc < 835000) {
        timer = setTimeout(animateUpdate, 50); // probably not ideal either?
    }
}

Answer 1

小提琴示例

我会做的事情如下:

var start = new Date();
var maxTime = 835000;
var timeoutVal = Math.floor(maxTime/100);
animateUpdate();

function updateProgress(percentage) {
    $('#pbar_innerdiv').css("width", percentage + "%");
    $('#pbar_innertext').text(percentage + "%");
}

function animateUpdate() {
    var now = new Date();
    var timeDiff = now.getTime() - start.getTime();
    var perc = Math.round((timeDiff/maxTime)*100);

    if (perc <= 100) {
        updateProgress(perc);
        setTimeout(animateUpdate, timeoutVal);
    }
}