Boucle for avec un pas !

Version imprimable

07/04/2009, 18h34
yamatoshi

Boucle for avec un pas !
Bonjour

Est-il possible de mettre en place un pas dans une boucle for. Considérons la boucle suivante :
Code:

1 2 3 4 5 for (i=0; i<10; i++) { div.style.top= i+"px" }
Lorsque j'exécute, ma div se place directement à la valeur top de i=10px alors que je souhaiterais que ma div prenne progressivement les valeurs de i donc 0px, 1px, 2px...10px avec un intervalle en seconde que je peut setter !

Est ce que cela est possible ?

Merci

en fait elle passe bien par les 10 occurrences, mais il te faut utiliser une temporisation :
Code:

1 2 3 4 5 6 7 8 9 10 11 var montimer = null function move(valeur){ if(valeur < 10){ div.style.top= valeur+"px" montimer = setTimeout(function(){move(valeur++);},500); } else{ clearTimeout(montimer ); } }
un truc dans le genre ;)

07/04/2009, 20h05
SpaceFrog

oui ou setInterval
07/04/2009, 20h12
Bovino

Citation:

Envoyé par SpaceFrog

oui ou setInterval

... et comme ça, même pas besoin de boucle ;)
07/04/2009, 20h24
le_chomeur

j'ai pas fait de boucle ^^
et le setinterval il faut le kill ... donc ça revient au même lol
08/04/2009, 07h38
javatwister

Code:

var timer= setInterval("if(val<10){val++;truc.style.top=val+'px'}else{clearInterval(timer);}",500) ;

:roll:
08/04/2009, 09h37
le_chomeur

ho ho ho pas mal javatwister ^^
n'oublies pas d'incrémenter la variable ;)
08/04/2009, 09h49
Bovino

Citation:

Envoyé par javatwister

Code:

var timer= setInterval("if(val<10){val++;truc.style.top=val+'px'}else{clearInterval(timer);}",500) ;

Il le fait déjà ;)

je bidouillais autour du truc de JT .. ^^
Code:

1 2 3 4 5 6 7 8 9 10 11 <script type='text/javascript'> val =0 function move(){ var timer= setInterval( function(){truc.style.top=(val<500)?((val++)+'px'):(clearInterval(timer))+'px';},100 ) ; } </script> </head> <body onload="truc=document.getElementById('foo');move()"> <div style='width:100px;background-color:red;position:absolute;' id="foo">s</div> </body>
j'arrive pas a lui faire retourner une valuer sur le clearInterval...

ha si ^^

Code:

var timer= setInterval( function(){truc.style.top=(val<50)?((val++)+'px'):((clearInterval(timer))?0:truc.style.top);},100 ) ;

08/04/2009, 09h57
le_chomeur

arf c'est le matin mes excuse java et bovino :p

lol spaffy , j'me sens moins seul , on va se prendre un café ?
08/04/2009, 10h00
SpaceFrog

Hein ?
Non fillot je ne remattais pas en cause l'incrément, j'essayais juste de virer le if ...
08/04/2009, 10h04
Bovino

Je me demandais si le fait de réaffecter la variable timer permettait d'effectuer un clearInterval ???
Dans l'idée :

Code:

var timer= setInterval( function(){truc.style.top=(val<50)?((val++)+'px'):((timer=50)+'px');},100 ) ;
08/04/2009, 10h05
le_chomeur

a voir , mais en la réaffectant je pense qu'on relance un NOUVEAU interval :-/ a vérifier
08/04/2009, 10h07
SpaceFrog

bien vu Beef !
apriori ça passe et sans erreur

Maintenant est ce que ça ne génère pas une fuite ?
08/04/2009, 10h13
Bovino

Effectivement, ça semble marcher, mais la question des fuites de mémoire... à vérifier :?
08/04/2009, 10h15
le_chomeur

je suis dessus pour les fuites ^^ je vous redis dans 5 minutes
08/04/2009, 10h16
SpaceFrog

sinon je me demande bien à quoi sert le clearInterval
08/04/2009, 10h21
le_chomeur

Aucune fuite détecté ^^

moi moi la fuite serait plutôt venu du fait qu'on réaffectais un interval a la même variable sans détruire le précédent interval , mais ça a l'air de fonctionner , la référence de l'interval étant remplacer par la précédente , aucun soucis ^^

par contre en passant un interval sans affectation la on aurais eu un problème je pense :

Code:

setInterval( function(){truc.style.top=(val<50)?((val++)+'px'):((timer=50)+'px');},100 ) ;
08/04/2009, 10h31
Bovino

Citation:

Envoyé par SpaceFrog

sinon je me demande bien à quoi sert le clearInterval

Du coup, la seule utilité est d'empêcher l'exécution d'un code sur un timeout en cours.

En revanche, je viens d'apprendre un truc intéressant, c'est de faire un setTimeout(fonction, 0) pour lancer la fonction dès que JavaScript a fini d'exécuter ses traitements en cours. A tester par exemple pour simuler un ondomready :?
08/04/2009, 10h33
yamatoshi
Citation:

Envoyé par javatwister

Code:

var timer= setInterval("if(val<10){val++;truc.style.top=val+'px'}else{clearInterval(timer);}",500) ;

:roll:

Ca marche pas javatwister :? Firebug me retourne ceci dès pour i=0
Code:

1 2 invalid increment operand
08/04/2009, 10h34
le_chomeur

loool bovino !
sujet de discution d'hier entre spaffy et moi pour le "domready" ...
je lui expliquais comment l'implémenter, et effectivement , l'astuce consiste a utiliser un setTimeout à 0 associer avec la vérification du readyState ( comment en ajax :) ) et du DOMContentLoaded ...

un peu long a expliquer dans un post mais si besoins j'vous ferais une démo ...
08/04/2009, 10h40
Bovino

@yamatoshi : Tu as bien initialisé la variable val ?

@le_chomeur :

Citation:

un peu long a expliquer dans un post mais si besoins j'vous ferais une démo ...

Avec plaisir ! Même une QR pour la FAQ si tu veux ! :mrgreen:

Citation:

Envoyé par Bovino

@yamatoshi : Tu as bien initialisé la variable val ?
Code:

1 2 3 4 5 6 7 8 9 timer = null; var boxposition = 10; for (val=0; val<boxposition; val++){ var timer = setInterval("if(val<"+boxposition+"){val++;madiv.style.top=-val+'px'}else{clearInterval(timer);}",500) ; }
invalid increment operand et parfois timer is not define

???:(

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
	</head>
	<body>
		<div style="border:1px solid red;width:50px;position:absolute" id="test">ici</div>
		<script type="text/javascript">
			var truc = document.getElementById('test');
			var val = 0;
			var timer= setInterval( function(){truc.style.top=(val<50)?((val++)+'px'):((clearInterval(timer))?0:truc.style.top);},100 ) ;
		</script>
 
	</body>
</html>

Bovino : je vous fais une démo en fin de matinée ;)

08/04/2009, 11h09
yamatoshi

Super le Chomeur et la même avec un seTimeout car SetInterval et ie6 c'est bizard :yaisse2:?
08/04/2009, 11h13
le_chomeur

qu'est ce qui est bizare ??
08/04/2009, 11h17
SpaceFrog

Heu fillot c'est pas le code que j'ai mis plus haut ? :oops:
08/04/2009, 11h24
le_chomeur

Spaffy : ben si , mais j'ai fais un copier/coller dans une page pour montrer que ça fonctionnait :-)

je ne me l'approprie pas lol je te rassure
08/04/2009, 11h27
yamatoshi

Citation:

Envoyé par le_chomeur

qu'est ce qui est bizare ??

Ben bien que j'ai setté le timer à 1 sous ie6 c'est tres lent. Ma div fait 370 px de hauteur donc si je clik sur le dernier lien de ma div il remonte très lentement vers le top. par contre sur ff c'est assez fluide. j'ai lu ailleurs que ie6 interpretait mal setIntervall qu'il valait mieux utiliser setTimeout d'où ma question le chomeur :yaisse2:
08/04/2009, 11h32
le_chomeur

non rien a voir avec le setInterval ou setTimeout ;) , conseil ne jamais descendre en dessous de 20/25 ms car en dessous tu vas surcharger ton processeur , il vaut mieux utiliser un algorythme de déplacement ...

exemple , sur la propriété height : http://mbox.tuxfamily.org/toggle/

on peut reproduire sur le left ou autre ;)

Fuseau horaire GMT +2. Il est actuellement 08h07.