Lorsque vous créez du javascript en HTML dont le traitement prend beaucoup de temps, avez-vous déjà implémenté une ProgressBar et avez-vous eu des problèmes avec la ProgressBar qui ne se déplaçait qu'une fois le processus complet terminé ?

Dans cet article, j'aimerais présenter un exemple de solution temporaire à cette situation.

Si vous suivez ces étapes, la ProgressBar fonctionnera pendant le traitement.

Étape 1 : placer l'ensemble du processus dans une méthode asynchrone

Tout d'abord, placez l'ensemble du processus dans une méthode asynchrone et exécutez-le.

async function MyFunction(ctx, canvas) {

}

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

Étape 2 : Écrivez un sommeil après avoir modifié la valeur de la ProgressBar

Ensuite, écrivez ce qui suit après avoir modifié la valeur de la ProgressBar.

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

Cela entraînera une modification de la barre de progression au cours du processus.

Nous avons introduit un exemple de solution temporaire pour faire fonctionner la ProgressBar normalement.

J'espère que cet article vous aidera à résoudre au moins une de vos difficultés.

Merci d'avoir lu.