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

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

Answer 2

简单地做一些好的老式数学。它看起来不对，因为你给出宽度百分比作为“tick”的值，最终将是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();
    });
}); 

Answer 3

jsFiddle Demo

<强>描述

这只是每隔10毫秒增加一次进度......因为你知道所需的时间，花费时间除以100，然后将你的时间间隔设为var timer = setInterval(updateProgressbar, 10);

<强> HTML

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

<强> JS

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

<强> JS

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

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

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

Answer 4

你可能想要这样的东西：

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

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