如何更新进度条？答案

【问题标题】：How to update progress bar?如何更新进度条？
【发布时间】：2016-08-17 22:01:31
【问题描述】：

初始化后，我运行了一些循环。在他们每个人之后，我希望进度条更新它的值。但它只在最后显示它的最终值，所以我没有看到每一步：

$("#progressbar").progressbar();

for (i = 0; i < 10000000; i++) {
  // takes some time...
}
$("#progressbar").progressbar("value", 25);

for (i = 0; i < 10000000; i++) {
  // takes some time...
}
$("#progressbar").progressbar("value", 50);

for (i = 0; i < 10000000; i++) {
  // takes some time...
}
$("#progressbar").progressbar("value", 75);

for (i = 0; i < 1000000000; i++) {
  // takes some time...
}
$("#progressbar").progressbar("value", 100);

Here is a fiddle.

【问题讨论】：

Demo
@Tushar：谢谢，但我想在某些操作之后更新进度，比如循环或整个函数，而不是在某个时间间隔之后。

标签： javascript jquery jquery-ui progress-bar

【解决方案1】：

尽量把进度条数值变化放在每个函数的末尾。

【讨论】：

虽然这在理论上可以回答这个问题，it would be preferable 在此处包含答案的基本部分，并提供链接以供参考。

【解决方案2】：

在 Javascript 中为测试目的模拟时间间隔的唯一可靠方法是使用 setInterval 和 setTimeout。循环运行太快。

如果您想确保步骤按顺序执行，您可以这样做。只需将 setTimeout 调用替换为您真正想要做的。

function updateProgressbar($bar, value) {
    $bar.progressbar("value", value);
}

function step1() {
    setTimeout(function() {
    console.log('this is step 1');
    updateProgressbar($("#progressbar"), 25);
    step2();
  }, Math.random() * 2000 + 250);
}

function step2() {
    setTimeout(function() {
    console.log('this is step 2');
    updateProgressbar($("#progressbar"), 50);
    step3();
  }, Math.random() * 2000 + 250);
}

function step3() {
    setTimeout(function() {
    console.log('this is step 3');
    updateProgressbar($("#progressbar"), 75);
    step4();
  }, Math.random() * 2000 + 250);
}

function step4() {
    setTimeout(function() {
    console.log('this is step 4');
    updateProgressbar($("#progressbar"), 100);
  }, Math.random() * 2000 + 250);
}

$("#progressbar").progressbar();

console.log($("#progressbar").data('value'));

step1();

Demo

在这种情况下，每个步骤都在前一个步骤中调用，以确保它们按从 1 到 4 的顺序被调用。

另一方面，如果您希望同时触发所有步骤（即独立的 ajax 请求），您可以这样做。

function updateProgressbar($bar, step) {
    progress += step;
    $bar.progressbar("value", progress);
}

function step1() {
    setTimeout(function() {
    console.log('this is step 1');
    updateProgressbar($("#progressbar"), 25);
  }, Math.random() * 3000 + 1000);
}

function step2() {
    setTimeout(function() {
    console.log('this is step 2');
    updateProgressbar($("#progressbar"), 25);
  }, Math.random() * 3000 + 1000);
}

function step3() {
    setTimeout(function() {
    console.log('this is step 3');
    updateProgressbar($("#progressbar"), 25);
  }, Math.random() * 3000 + 1000);
}

function step4() {
    setTimeout(function() {
    console.log('this is step 4');
    updateProgressbar($("#progressbar"), 25);
  }, Math.random() * 3000 + 1000);
}

$("#progressbar").progressbar();

var progress = 0;

step1();
step2();
step3();
step4();

Demo

在此示例中，所有四个步骤同时触发，但在随机时间执行。 updateProgressbar 函数接收 2 个参数，第一个是进度条的 jQuery 实例，第二个是正在进行的 increase。观察控制台以跟踪执行情况。

【讨论】：