[Javascript] Évitez le phénomène où la ProgressBar ne bouge pas (elle ne bouge qu'après la fin d'une série de processus)

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 ProgressBar.

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

Cela entraînera un changement de la ProgressBar 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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!