javascript - jQuery 进度条

Question

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

如果我有以毫秒为单位的时间值(600000 = 10 分钟，300000 = 5 分钟，等等)，我怎样才能使该时间段内的条形图增加？

在 jsfiddle 链接中，我试图将进度条设置为增加 835000 毫秒。

但是，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

Fiddle Example

我会做类似的事情:

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