1 pièce(s) jointe(s)
Redessiner contrôles HTML pendant un traitement javascript
Bonjour,
Je fais un long traitement côté javascript / JQuery et j'aimerai afficher une progressbar pour faire patienter le visiteur.
Le problème est dès qu'on fait un traitement javascript, la page n'est redessinée que lorsque le traitement est terminé (lorsque l'on sort de la fonction).
L'utilisateur voit donc que son navigateur rame puis au bout de quelques secondes, il voit une progressbar remplie à 100% (au lieu de la voir se remplir au fur et à mesure pendant les quelques secondes).
En clair, je cherche un "DoEvents" (VB) pour javascript pour qu'il rafraîchisse ma progressbar, voire un texte d'attente.
Si vous avez le même problème, une recherche sur google vous mènera sur les fonctions delay, settimeout, wait qui permettent de temporiser une action mais ce n'est pas ce qu'on veut.
Bien penser que je dis "rafraîchir" pour redessiner / actualiser le visuel d'un contrôle HTML et non pour recharger la page ou rafraîchir un updatepanel.
Si je poste ici, c'est pour vous apporter la solution, pas pour la demander :-)
ça ne donne pas un code très lisible mais voilà ma solution :
remplacer les boucles "for" par une fonction récurrente :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function testLongActionRec() {
var val = $('#progressbar').progressbar('value') || 0;
$('#progressbar').progressbar('value', val + 1 );
$('#mySpan').html(val + 1);
doSomeStaff();
if (val < 99) {
setTimeout(testLongActionRec, 1);
}
} |
"val" peut être remplacer par une variable globale "i" pour remplacer les boucles classique "for(var i = 0; i < 100; i++)".
Puis remplacer les longs traitements en plusieurs parties (séparer 200 lignes de codes en 4 * 50 lignes par exemple) :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
function testLongActionPart1() {
$('#progressbar').progressbar('value', 0 );
$('#mySpan').html(0);
setTimeout(testLongActionPart2, 1);
}
function testLongActionPart2() {
// premier bloc d'actions
$('#progressbar').progressbar('value', 30);
$('#mySpan').html(30);
setTimeout(testLongActionPart3, 1);
}
function testLongActionPart3() {
// second bloc d'actions
$('#progressbar').progressbar('value', 65);
$('#mySpan').html(65);
setTimeout(testLongActionPart4, 1);
}
function testLongActionPart4() {
// troisième bloc d'actions
$('#progressbar').progressbar('value', 100);
$('#mySpan').html(100);
} |
Tout est dans la force de la schtuss "setTimeout", cette fonction rend la main pour redessiner la page puis lance la fonction demandé après le laps de temps voulu (1ms ici).
En bonus un petit projet (pièce jointe) qui reprend en exemple le code ci-dessus.
En espérant que ça fasse gagner du temps à d'autres personnes, je vous souhaite un excellent codage.
