Rafraîchissement régulier d'un élément

Version imprimable

08/11/2016, 04h33
Arsene12

Rafraîchissement régulier d'un élément

Bonjour,

j'ai 2 boutons : 1 bouton "Action" et 1 bouton "Compteur" affichant un chiffre.

Je voudrai qu'en cliquant sur le bouton Action le bouton Compteur affiche toute les x secondes le chiffre i+1.

https://jsfiddle.net/wcneesyw/8/ ( ce code n'affiche que la valeur finale)

Auriez-vous une solution simple à me proposer svp? Je vous remercie d'avance,

Cordialement

Arsène

il faut que tu changes ton algo.

en gros, il va effectivement boucler 10 fois, mais il le fera en une micro-seconde... et pendant ce temps, il va lancer 10 setTimeout() qui s'executeront tous a la suite en une micro-seconde mais dans 300ms
(je ne sais pas si mon exeplication est plus clair :aie: )

et si tu veux effectivement faire un appel recursif (cf. ton commentaire), il faut que tu revois la definition du mot ;)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 $('#Action').on('click',function() { increment(1); }); function increment(i) { $('#buttonV').attr('value', i); if(i < 10) { setTimeout(function() { increment((i+1)); }, 300); } }

Bonjour,

La méthode setTimeout sert surtout à retarder une action, c'est à dire effectuer une action après un délai ou une pause.
Pour ce que tu veux faire, à mon avis, ce sera plus simple d'utiliser la méthode setInterval, qui exécute une action à chaque intervalle du temps spécifié en paramètre (ici 300 ms):

Code:

1
2
3
4
5
6
7
8
9
 
$('#Action').on	('click', function () {var i = 1, intervalle = setInterval (
                                    function ()
                                    {
                                      $('#buttonV').attr('value', i++);
                                      if (i > 10)
                                      {
                                      	clearInterval(intervalle);
                                      }}, 300);});

08/11/2016, 18h22
Arsene12

Merci pour vos solutions qui m'aident beaucoup.
Dans mon application, je voudrais afficher une fenêtre modale durant le temps de traitement.
Savez vous comment faire pour que les fonctions s'exécutent les unes après les autres?

https://jsfiddle.net/wcneesyw/11/

Je voudrai que "Arrivée" ne s'affiche qu'après que le bouton V indique le chiffre 10.
08/11/2016, 18h32
Invité

Bonjour,

MERCI d'afficher ton code AUSSI dans le contenu de tes messages.

Ainsi, même si ton fiddle disparait, on aura toujours ce code.

Ok j'y avais pas pensé, je le rajoute :

Code HTML :

Code:

1
2
3
4
5
<button id="Action">Go</button>
<br><br>
<input id="buttonV" type="button" value="1" />
<br><br>
<input id="buttonV2" type="button" value="Départ" />

CODE JAVASCRIPT :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('#Action').on('click',function() {
$('#buttonV2').hide();
	increment(1);
 $('#buttonV2').val("Arrivée");  
 $('#buttonV2').show(); 
});
 
function increment(i) {
	$('#buttonV').attr('value', i);
	if(i < 10) {
  	setTimeout(function() {
  		increment((i+1));
    }, 300);
	}
}

je suis parvenu au résultat :

https://jsfiddle.net/wcneesyw/12/

Maintenant je cherche une méthode qui marche sans le setTimeout ni le i == x;

Code:

1
2
3
4
5
6
$('#Action').on('click',function() {
function 1();
function 2();
function 3();
function 4();
});

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('#Action').on('click',function() {
$('#buttonV2').hide();
	increment(1); 
}); 
function increment(i) {
	$('#buttonV').attr('value', i);
	if(i < 10) {
  	setTimeout(function() {
  		increment((i+1));
    },300)
	}  else if(i === 10) {
  $('#buttonV2').val("Arrivée"); 
  $('#buttonV2').show();	
    } 	
	}

15/11/2016, 09h26
Toufik83

si tu veux enlever setTimeout et le i, tu peux essayé $.animate().