【问题标题】：jQuery progress timer barjQuery进度计时器栏
【发布时间】：2013-11-22 18:16:57
【问题描述】：

我在 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?
    }
}

【问题讨论】：

你在使用 jquery-ui 进度条吗？

标签： javascript jquery timer progress-bar

【解决方案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);
    }
}

【讨论】：

【解决方案2】：

只需做一些好的老式数学。这似乎不正确，因为您将宽度百分比作为“刻度”的值，最终将是 835000！这意味着您最终的宽度为“835000%”！！！

Example

var timer = 0,
    perc = 0,
    timeTotal = 835000,
    timeCount = 50;

function updateProgress(percentage) {
    var x = (percentage/timeTotal)*100,
        y = x.toFixed(3);
    $('#pbar_innerdiv').css("width", x + "%");
    $('#pbar_innertext').text(y + "%");
}

function animateUpdate() {
    if(perc < timeTotal) {
        perc++;
        updateProgress(perc);
        timer = setTimeout(animateUpdate, timeCount);
    }
}

$(document).ready(function() {
    $('#pbar_outerdiv').click(function() {
        clearTimeout(timer);
        perc = 0;
        animateUpdate();
    });
});

【讨论】：

【解决方案3】：

jsFiddle Demo

说明

这只是每 10 毫秒增加一次进度...既然您知道所需的时间，请用该时间除以 100，然后将其设为 var timer = setInterval(updateProgressbar, 10); 中的时间间隔

HTML

<div id="progressbar"></div>

var progress = 0;
var timer = setInterval(updateProgressbar, 10);

function updateProgressbar(){
    $("#progressbar").progressbar({
        value: ++progress
    });
    if(progress == 100)
        clearInterval(timer);
}

$(function () {
    $("#progressbar").progressbar({
        value: progress
    });
});

JS Fiddle Just for you

var progress = 0;
var timer = setInterval(updateProgressbar, 8350);

function updateProgressbar(){
    $("#progressbar").progressbar({
        value: ++progress
    });
    if(progress == 100)
        clearInterval(timer);
}

$(function () {
    $("#progressbar").progressbar({
        value: progress
    });
});

【讨论】：

【解决方案4】：

你可能想要这样的东西：

var currentTime = new Date().getTime();
perc = (currentTime - StarTime)/duration;

如果也这样设置 StartTime，您可以计算每次更新的百分比。

【讨论】：