Maison > interface Web > js tutoriel > le corps du texte

[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)

王林
Libérer: 2024-08-16 11:27:35
original
506 Les gens l'ont consulté

[Javascript] Avoid the phenomenon where the ProgressBar does not move (it only moves after a series of processes are completed)

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.
Copier après la connexion

É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);
Copier après la connexion

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal