javascript 每 x 秒增加一次进度条

increment progressbar every x seconds

提问by Mythrillic

I basically need a jQuery UI progress bar to increment x amount every x seconds. After it reaches 100% it needs to run a function to get some content.

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

Basically a timer.

基本上是一个计时器。

EDIT:I don't need code to fetch content. I already have that.

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

回答by alex

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.

js小提琴。

回答by Salman A

Assuming that you're using the jQueryUI progressbar:

假设您正在使用jQueryUI 进度条：

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

演示在这里

回答by Alan Haggai Alavi

jQuery UIhas a progress bar widget. You can set its value inside setInterval. Run clearIntervalwhen completeevent is raised.

jQuery UI有一个进度条小部件。你可以在里面设置它的值setInterval。clearInterval在complete引发事件时运行。