Barre de progression dans une boucle : impossible de modifier son avancement

[piero-la-lune]

Bonjour à tous,

Je me retrouve devant un petit problème : je m'en remet à vous pour trouver une solution...

J'ai une fonction en javascript qui contient plusieurs boucles, et qui peut mettre un certain temps à s'exécuter. Pour que les utilisateurs voient l'avancement du calcul, je voulais ajouter une barre de progression.
Dans les différentes boucles, j'ai donc plusieurs appels du type

Code javascript :

FenPrincipale.progression(int);

Seulement la barre de progression n'apparaît même pas : la page se bloque jusqu'à ce que la fonction soit terminée, sans afficher et encore moins mettre à jour la barre de progression. Pourtant, si j'arrête le calcul au milieu, la barre de progression s'affiche, et l'avancement est normal.

C'est donc visiblement juste un blocage de la page : existe-t-il un moyen pour éviter ce blocage et pour rafraîchir l'affichage en attendant la fin de la fonction ?

Un bout de la fonction pour vous donner une idée :

Code javascript :

1
2
3
4
5
6
7
8
for (j=0; j<nbEquipage; j++) {
	for (k=0; k<manchesRetirees; k++) {
		equipages[j]['points'] -= equipages[j]['pointsTries'][nbManche-k-1];
		equipages[j]['pointsRetires'].push(equipages[j]['pointsTries'][nbManche-k-1]);
	}
	equipages[j]['pointsTries'] = equipages[j]['pointsTries'].slice(0, equipages[j]['pointsTries'].length-manchesRetirees);
	FenPrincipale.progression(parseInt((i+1)*10/nbEquipage)+60);
}

D'avance merci pour vos réponses !

[utopman]

Bonjour Pierro,

il semble que ton script soit long à executer. malheureusement, JS est monothread et tu ne peux executer que séquentiellement ton script. (dommage donc si tu as plusieurs cores dans ton cas...)

ca que tu peux faire c'est un calcul partiel répété. tu aurais donc un truc du genre:
on considère que tu fais le tour de toutes tes manches retirées, donc il faudrait que la fonction de calcul mémorise où tu en es rendu pour l'avancement du calcul sur l'équipage.
tu peux utliser le retour de la fonction ou une variable globale si ton retour de fonction est déjà utilisé.

ensuite, l'idée est de relancer la fonction de calcul à intervals réguliers, et tu aurais donc une boucle principale du genre

Code :

1
2
3
4
5
6
 
while( !fini )
{
  rafraichirAffichage();
  calculerProgression();
}

Le tout est qu'à chaque fois que tu relance calculerProgression (qui fait la boucle sur l'equipage et sur les manches) tu incrémente le compteurj de 1 seulement et tu mémorise où tu en es rendu dans la variable globale.
Tu peux ensuite utiliser un booléen pour indiquer que tu es bien arrivé à compléter ton calcul et que tu es prêt à le refaire si nécessaire.

[piero-la-lune]

Merci pour ta réponse,

C'est effectivement le découpage de ma fonction qui me parait la seule solution.
Je vais finalement m'orienter vers la fonction setTimeout(); qui permet de rafraîchir l'affichage : mais pour cela il faut que je découpe en petit morceaux ma fonction...

Voilà ce que cela devrait donner :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
	this.retirerManches = function(i) {
 
for (j=0; j<this.manchesRetirees; j++) {
	this.equipages[i]['points'] -= this.equipages[i]['pointsTries'][this.nbManche-j-1];
	this.equipages[i]['pointsRetires'].push(this.equipages[i]['pointsTries'][this.nbManche-j-1]);
}
this.equipages[i]['pointsTries'] = this.equipages[i]['pointsTries'].slice(0, this.equipages[i]['pointsTries'].length-this.manchesRetirees);
FenPrincipale.progression(parseInt((i+1)*10/this.nbEquipage)+60);
 
if (++i < this.nbEquipage) {
	setTimeout(function() { obj.retirerManches(i); }, 0);
}
else {
	setTimeout(function() { obj.classement(0); }, 0);
}
 
	};

Ça devrait fonctionner, normalement. Mais j'ai un peu de boulot pour transformer toute la fonction... C'est quand même dommage qu'il n'y ai pas d'autres moyens : je trouve cette manière pas terrible niveau programmation.