Mise à jour progress bar via une boucle for

**solo190** · 27/03/2017, 17h56

Bonjour a tous et toutes.
j'ai mis sur pied un progress bar

Code :

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

1
2
3
4
5
<div class="progress">
					         <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
								<span class="sr-only">60% effectué</span>
												</div>
											</div>

j'ai une function java script qui doit faire une boucle sur un nombre de numero connu et je souhaite mettre a jour la le progress bar en fonction de cette boucle.

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
function envoyer_message_groupe(){
 
		// insertion dans le detail des transactions
		var xhr = getXhr()
 
		var sender_id=document.getElementById('sender_id').value;
		var destinataire=document.getElementById('destinataire').value;
		var message=document.getElementById('message').value;
		// On défini ce qu'on va faire quand on aura la réponse
 
		xhr.open("POST","../ss/envoyer_message_simple.php",true);
 
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // permet l'encodage des POST
 
		// boucle sur la liste des numero
		var chaine=document.getElementById('contact_lies').value;
		var reg=new RegExp("[;]");
		// document.write("Chaîne d'origine : " + chaine + "<BR>");
		var tableau=chaine.split(reg);
		for (var i=0; i<tableau.length-1; i++) {
		alert(tableau[i]);
 
		/*
 
		xhr.send("&sender_id=" + sender_id + "&destinataire=" + destinataire + "&message=" + message); // On définit les variables et leurs valeurs
 
		xhr.onreadystatechange = function(){
 
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
			if(xhr.readyState == 4 && xhr.status == 200){
				// verifions si l'une des ligne a echoué 
				alert(xhr.responseText);
				}
			*/
		}
 
}

mon probleme est que je n'arrive pas a mettre a jour le chargement du progress bar dans ma boucle for car normalement on doit avoir un truc du genre
width=i*100/nombre_total (%)
a chaque fois que i s’incrémente le progress bar va se chargé et lorsqu'on aurait atteint le nombre maximal width sera à 100%.
Merci de votre aide.

**danielhagnoul** · 27/03/2017, 22h41

Exemple d'animation d'une barre de progression :

Code HTML :

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
63
64
65
66
67
68
69
70
71
72
<!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="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
    progress {
      width: 20rem;
    }
  </style>
  <script>
    'use strict';
    
    document.addEventListener( 'DOMContentLoaded', ev => {
      
    }, false );
    
    window.addEventListener( 'load', ev => {
      
      const
        progressBar = document.querySelector( "progress" ),
        outputValue = document.querySelector( "#outputValue" ),
        kIntRandom = ( min, max ) => {
          // retourne X tel que : min <= X <= max
          return Math.floor( Math.random() * ( max - min + 1 ) + min );
        };
        
      // generator
      function* genFunc(){
        for ( let n = 0; n < 10; n++ ){
          yield kIntRandom( 0, 100 );
        }
      }
      
      // iterator
      const iterObj = genFunc();
      
      let Obj = iterObj.next();
      
      // animation
      function animeProgressBar(){
        if ( ! Obj.done ){ // tant que false
          
          // change la valeur
          progressBar.value = Obj.value;
          
          outputValue.value = Obj.value + " %";
          
          // il faut ralentir l'action pour voir la progression
          setTimeout( () => {
            Obj = iterObj.next(); // obj suivant
            animeProgressBar(); // appel récursif
          }, 1000 ); // 1s
        }
      }
      
      animeProgressBar();
      
    }, false );
  </script>
</head>
<body>
  <main>
 
    <progress value="60" max="100"></progress> <output id="outputValue">60 %</output>
 
  </main>
</body>
</html>

Documenation sur generator et iterator :

**solo190** · 28/03/2017, 18h33

Merci danielhagnoul,
j'ai essayé de lire ce que tu as posté sans vraiment comprendre .
voici ce que j'ai reussi a faire sauf que le progress bar se met a agir a la fin des 100% bref des traitement. puisque j'acciche le niveau d'avancement a chaque fois.

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
63
64
65
66
67
68
function envoyer_message_groupe(){
 
		// Gestion du progress bar
		var elem = document.getElementById("myBar"); 
		var width = 1;
		// End
 
		// insertion dans le detail des transactions
		var xhr = getXhr()	
		alert('yes');	
		var sender_id=document.getElementById('sender_id').value;
		// var destinataire=document.getElementById('destinataire').value; il est remplacé ici par tableau[i] 
		var message=document.getElementById('message').value;
		// On défini ce qu'on va faire quand on aura la réponse
 
		xhr.open("POST","../ss/envoyer_message_simple.php",true);
 
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // permet l'encodage des POST
		// boucle sur la liste des numero
		var chaine=document.getElementById('contact_lies').value;
		var reg=new RegExp("[;]");
		// document.write("Chaîne d'origine : " + chaine + "<BR>");
		var tableau=chaine.split(reg);
		for (var i=0; i<=tableau.length-1; i++) {
		alert(tableau[i]);
 
 
		// on joue sur le progress-bar
		alert(Math.floor(100*i/(tableau.length-1)) + '%');
        elem.style.width = Math.floor(100*i/(tableau.length-1)) + '%'; 
		//updatebar(Math.floor(100*i/(tableau.length-1)));
		// 
 
		/*
 
		xhr.send("&sender_id=" + sender_id + "&destinataire=" + destinataire + "&message=" + message); // On définit les variables et leurs valeurs
 
		xhr.onreadystatechange = function(){
 
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
			if(xhr.readyState == 4 && xhr.status == 200){
				// verifions si l'une des ligne a echoué 
				alert(xhr.responseText);
				}
			*/
		}
 
		// apres avoir envoyé tous les messages on remet notre progress-bar à 0
 
 
}
 
 
$(function(){
 
    $('#send_message').on('click',envoyer_message_groupe)
    })
 
function updatebar(p){
 
   $('#res').html(tab[p]);
	var elem = document.getElementById("myBar"); 
   elem.style.width = p+"%";
  if(p<100){
  clearTimeout(run);
  run=setTimeout( function() {updatebar(++p)},100);
  }
}

Merci pour votre cout de main.

Mise à jour progress bar via une boucle for

JavaScript

Discussions similaires

Partager

Partager