Affichage progression pendant calcul long
Je cherche à défiger ma page.
Je veux réaliser de long calculs et je veux pouvoir afficher la progression. Pour cela j'ai utilisé setTimeout qui me permet de voir le texte d'information renseigné par le code en cours d'exécution.
par exemple :
Code:
1
2
3
4
5
6
7
8
9
10
11
| txtLoadingInfo.innerHTML= "Calcul 1";
calcul1();
txtLoadingInfo.innerHTML= "Calcul 2";
calcul2();
txtLoadingInfo.innerHTML= "Calcul 3";
calcul3();
txtLoadingInfo.innerHTML= "Calcul 4";
calcul4();
txtLoadingInfo.innerHTML= "Calcul 5";
calcul5();
txtLoadingInfo.innerHTML= "Calcul terminés" |
Cela n'affiche rien tant que les calculs ne sont pas terminés et affiche directement "Calcul terminés" à la fin.
J'ai donc utilisé le code suivant :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| imgage.src = "PhotoLoading.png";
setTimeout(init,0);
function init(){
txtLoadingInfo.innerHTML= "Calcul 1";setTimeout(()=>{
calcul1();
txtLoadingInfo.innerHTML= "Calcul 2";setTimeout(()=>{
calcul2();
txtLoadingInfo.innerHTML= "Calcul 3";setTimeout(()=>{
calcul3();
txtLoadingInfo.innerHTML= "Calcul 4";setTimeout(()=>{
calcul4();
txtLoadingInfo.innerHTML= "Calcul 5";setTimeout(()=>{
calcul5();
txtLoadingInfo.innerHTML= "Calcul terminés"
},0);},0);},0);},0);},0);},0);
} |
Résultat: ca fonctionne mais le code n'est pas beau, de plus l'image dont src est renseignée par "PhotoLoading.png" n'apparaît que après le 2ème calcul sauf si je met le premier setTimeout à 100 ms.
Est-il possible de faire plus élégant en utilisant Async Await ?
J'ai un peu testé et je n'ai pas réussi.
