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 der ProgressBar geändert haben

Schreiben Sie als Nächstes Folgendes, nachdem Sie den Wert der 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.