[Javascript] Vermeiden Sie das Phänomen, dass sich die ProgressBar nicht bewegt (sie bewegt sich erst, nachdem eine Reihe von Prozessen abgeschlossen ist).

Wenn Sie Javascript in HTML erstellen, dessen Verarbeitung lange dauert, haben Sie dann jemals eine ProgressBar implementiert und hatten Probleme damit, dass sich die ProgressBar erst bewegte, nachdem der gesamte Prozess abgeschlossen war?

In diesem Artikel möchte ich ein Beispiel für eine vorübergehende Lösung für diese Situation vorstellen.

Wenn Sie diese Schritte befolgen, funktioniert die Fortschrittsleiste während der Verarbeitung.

---

Schritt 1: Platzieren Sie den gesamten Prozess in einer asynchronen Methode

Platzieren Sie zunächst den gesamten Prozess in einer asynchronen Methode und führen Sie ihn aus.

async function MyFunction(ctx, canvas) {

}

MyFunction(ctx, canvas); // Be sure to run it in the original location.

---

Schritt 2: Schreiben Sie einen Schlaf, nachdem Sie den Wert des ProgressBar geändert haben

Als nächstes schreiben Sie Folgendes, nachdem Sie den Wert des ProgressBar geändert haben.

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
await sleep(0);

Dies führt dazu, dass sich die Fortschrittsleiste während des Vorgangs ändert.

---

Wir haben ein Beispiel für eine vorübergehende Lösung vorgestellt, damit die ProgressBar normal funktioniert.

Ich hoffe, dieser Artikel wird Ihnen helfen, mindestens eines Ihrer Probleme zu lösen.

Vielen Dank fürs Lesen.

Das obige ist der detaillierte Inhalt von[Javascript] Vermeiden Sie das Phänomen, dass sich die ProgressBar nicht bewegt (sie bewegt sich erst, nachdem eine Reihe von Prozessen abgeschlossen ist).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!