Wie aktualisiert man den Fortschrittsbalken?

Question

Ich versuche, den Wert der jQuery UI Progressbar zu aktualisieren.

Nach der Initialisierung führe ich einige Schleifen. Nach jedem von ihnen möchte ich den Fortschrittsbalken, um seinen Wert zu aktualisieren. Aber es ist nur ganz am Ende mit seinem Endwert angezeigt, so sehe ich nicht jeden Schritt:

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

Versuchen Sie, am Ende jeder Funktion die Fortschrittsbalkenwertänderung zu setzen.

Answer 2

Die einzige zuverlässige Möglichkeit, ein Zeitintervall für Testzwecke in Javascript zu simulieren, ist setInterval und setTimeout. Loops laufen zu schnell.

Dies können Sie tun, wenn Sie sicherstellen möchten, dass die Schritte der Reihe nach ausgeführt werden. Ersetzen Sie einfach die setTimeout-Aufrufe mit dem, was Sie tatsächlich tun möchten.

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 diesem Fall wird jeder Schritt in der vorherigen aufgerufen, um sicherzustellen, werden sie in der Reihenfolge 1 bis 4.

Auf der anderen Seite aufgerufen werden, wenn Sie alle wollen Schritte, die zur gleichen Zeit ausgelöst werden (dh unabhängige Ajax-Anfragen), das ist, was Sie tun können.

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 diesem Beispiel sind alle vier Schritte gleichzeitig abgefeuert, aber zu zufälligen Zeiten auszuführen. Die updateProgressbar-Funktion empfängt 2 Parameter, erstens ist die jQuery-Instanz der Fortschrittsleiste, zweitens ist die Erhöhung in Bearbeitung. Beobachten Sie die Konsole, um die Ausführung zu verfolgen.