Barre de progression ne s'actualise qu'avec alert entre chaque exécution

**TigerCX** · 15/07/2015, 17h08

Bonjour à tous,

Je veux faire une barre de progression pour envoi de courriel.

En premier temps, je récupère la liste de mes courriels avec ajax, ensuite je fais un each pour chaque élément. Rien de trop compliqué !

Voici mon code

Code javascript :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
  if(confirm('Êtes-vous sûr de vouloir envoyer ce message à tous les parents inscris ?')){
    $.ajax({
      async : false,
      url : "../ajax/returncourriel.php",
      data : {sujet:formObj.sujet.value,
              message:formObj.message.value},
      type : "post"
    })
    .success(function(data){
      allcourriel = data; // récupération de tous les courriels
    });
 
    progwidth=0; // % de la progression, on commence à 0%
 
    $('.prog-content').width(progwidth+'%'); // progression de la barre
 
    allcourriel = explode('#',allcourriel); // mise en tableau des courriels
 
    $('.prog-content').html('0/' + allcourriel.length); // affichage du nombre de courriels envoyés / total de courriels à envoyer
 
    $.each(allcourriel,function(index,value){ // pour chaque courriel
      $.ajax({ // envoi un courriel à l'utilisateur
        async : false,
        url : "../ajax/sendalertes2.php",
        data : {courriel:value},
        type : "post"
      });
      progwidth = ((index+1)/allcourriel.length)*100; // calcul de la barre de progression (courriel actuel / total) * 100
      $('.prog-content').width(progwidth+'%'); // mise-à-jour de la barre de progression
      prog = index+1; // calcul du courriel en cours
      $('.prog-content').html(prog + '/' + allcourriel.length); // mise-à-jour de l'affichage de la progression (en texte)
    })
 
    $('.prog-content').width('100%'); // Fin de la barre de progression (100%)
    $('.prog-content').html(allcourriel.length + '/' + allcourriel.length); // affichage en texte de la fin de la progression (x / x)
  }
 
  return false;

À noter que tout fonctionne dans mon script, mise à part des 2 affichages pour la progression, soit l'avancement de la barre et l'affichage en texte. Par contre, si je mets un alert(); juste après mes 2 mises-à-jour on voit très bien la progression.

Pourtant, après mon each, avec ou sans alerte dans mon each pour forcer la progression, mon 100% s'affiche très bien.

Comment faire pour forcer l'affichage de ma progression sans passer par une alerte ?

Merci de votre aide.

**danielhagnoul** · 16/07/2015, 21h45

C'est normal.

Dans les anciennes versions (avant ES2015) le JS ne rend jamais la main avant la fin de l'action, la seule exception c'est avec un dialogue alert(). Il est donc impossible de voir le DOM se mettre progressivement à jour, on ne peut voir que l'état initial et le résultat final.

La nouvelle version de JS (ES2015, que l'on appelle aussi ES6) offre plusieurs nouveautés, il permet d'interrompre une action.

Exemple ES2015 à copier-coller pour tester dans Chrome :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta http-equiv="cache-control" content="public, max-age=60">
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta name="author" content="Daniel Hagnoul">
    <title>Test</title>
</head>
<body>
 
    <label for="progressBar">Progression du chargement des courriels : </label>
    <progress id="progressBar" value="0" max="100"></progress>
    <input id="progressText" type="text" size="5" value="0 %">
 
    <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
    <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
    <script type="module">
 
        let
            allCourriel = [ "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k" ],
            allCourrielLength = allCourriel.length;
 
        function* generator( ){
            let
                index = 0;
 
            while ( index < allCourrielLength ){
                yield [ index, allCourriel[ index++ ] ];
            }
        }
 
        let
            iterator = generator(),
            obj = iterator.next();
 
        function progression( ){
            if ( ! obj.done ){ // tant que false
 
                // debug, console, touche F12
                console.log(  obj.value );
 
                // calcul et affichage du pourcentage
                let
                    pourcent = 100 * ( ( obj.value[ 0 ] + 1 ) / allCourrielLength );
 
                $( "#progressBar" ).val( pourcent );
                $( "#progressText" ).val( pourcent.toFixed( 2 ) + " %" );
 
                // il faut ralentir l'action pour voir la progression
                setTimeout( function( ){
                    obj = iterator.next(); // obj suivant
                    progression(); // appel récursif
                }, 500 ); // 0.5s
            }
        }
 
        progression(); // action !
 
    </script>
</body>
</html>

Barre de progression ne s'actualise qu'avec alert entre chaque exécution

jQuery

Discussions similaires

Partager

Partager