How to update progress bar?

Question

I'm trying to update the value of the jQuery UI Progressbar .

After the initialization, I run some loops. After each of them, I want the progress bar to update its value. But it's only displayed at the very end with its final value, so I don't see each step:

$("#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 .

Answer 1

尝试在每个函数的末尾添加进度条值。

Answer 2

The only reliable way to simulate a time interval for test purposes in Javascript is to use setInterval and setTimeout. Loops run too quickly.

This is what you can do if you want to ensure the steps execute in order. Just replace the setTimeout calls with what you actually want to do.

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

In this case, each step is called inside the previous one to ensure they will be called in order from 1 to 4.

On the other hand, if you want all steps to be fired at the same time (ie independent ajax requests) this is what you can do.

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

In this example, all four steps are fired at the same time but execute at random times. The updateProgressbar function receives 2 parameters, first is the jQuery instance of the progressbar, second is the increase in progress. Watch the console to keep track of the execution.