每x秒递增一次进度条

Question

我基本上需要一个jQuery UI进度条来每x秒递增x量。达到100％后，需要运行一个函数来获取一些内容。

基本上是一个计时器。

编辑：我不需要代码来获取内容。我已经有了。

Answer 1

var progressBar = $('#progress-bar'),
    width = 0;

progressBar.width(width);

var interval = setInterval(function() {

    width += 10;

    progressBar.css('width', width + '%');

    if (width >= 100) {
        clearInterval(interval);
    }
}, 1000);

jsFiddle

Answer 2

假设您使用的是jQueryUI progressbar：

var tick_interval = 1;
var tick_increment = 10;
var tick_function = function() {
    var value = $("#progressbar").progressbar("option", "value");
    value += tick_increment;
    $("#progressbar").progressbar("option", "value", value);
    if (value < 100) {
        window.setTimeout(tick_function, tick_interval * 1000);
    } else {
        alert("Done");
    }
};
window.setTimeout(tick_function, tick_interval * 1000);

Demo here

Answer 3

jQuery UI有一个progress bar widget。您可以在setInterval内设置其值。在complete事件发生时运行clearInterval。