Discussion :

[seroze]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[NoSmoking]

Bonjour,
c'est le comportement normal, le moteur de rendu ne prenant pas la main.

Pour que l'affichage soit visible en continu, il faut « différer » les affichages pour donner la main au moteur de rendu et lui laisser ainsi le temps d'afficher chaque étape. On utilise pour cela la méthode setTimeout(). C'est exactement la conclusion à laquelle tu es arrivé, async/await ne te seront pas d'une grande utilité.

Pour ton code, il te faut factoriser tout cela, exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function fct_1 (){console.log("function #1")}
function fct_2 (){console.log("function #2")}
function fct_3 (){console.log("function #3")}
 
const action = [fct_1,fct_2,fct_3];
const DELAY = 1000;  // le délai est à ajuster suivant le besoin
action.forEach((fct, ind)=>{
  setTimeout(fct, ind * DELAY)
});

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.

ceci est un autre problème, dans ce cas il te faut lancer ton 1st calcul une fois l'image chargée.

[seroze]

Merci pour l'information, je sais à quoi m'en tenir maintenant.