Boucle for avec un pas !

**yamatoshi** · 07/04/2009, 18h34

Bonjour

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

Code :

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

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

**le_chomeur** · 07/04/2009, 18h39

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

Code :

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

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

**SpaceFrog** · 07/04/2009, 20h05

oui ou setInterval

**Bovino** · 07/04/2009, 20h12

Envoyé par SpaceFrog

oui ou setInterval

... et comme ça, même pas besoin de boucle

**le_chomeur** · 07/04/2009, 20h24

j'ai pas fait de boucle ^^
et le setinterval il faut le kill ... donc ça revient au même lol

**javatwister** · 08/04/2009, 07h38

Code :

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

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

**le_chomeur** · 08/04/2009, 09h37

ho ho ho pas mal javatwister ^^
n'oublies pas d'incrémenter la variable

**Bovino** · 08/04/2009, 09h49

Envoyé par javatwister

Code :

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

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

Il le fait déjà

**SpaceFrog** · 08/04/2009, 09h50

je bidouillais autour du truc de JT .. ^^

Code :

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

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 :

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

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

**le_chomeur** · 08/04/2009, 09h57

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

lol spaffy , j'me sens moins seul , on va se prendre un café ?

**SpaceFrog** · 08/04/2009, 10h00

Hein ?
Non fillot je ne remattais pas en cause l'incrément, j'essayais juste de virer le if ...

**Bovino** · 08/04/2009, 10h04

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

Code :

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

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

**le_chomeur** · 08/04/2009, 10h05

a voir , mais en la réaffectant je pense qu'on relance un NOUVEAU interval :-/ a vérifier

**SpaceFrog** · 08/04/2009, 10h07

bien vu Beef !
apriori ça passe et sans erreur

Maintenant est ce que ça ne génère pas une fuite ?

**Bovino** · 08/04/2009, 10h13

Effectivement, ça semble marcher, mais la question des fuites de mémoire... à vérifier

**le_chomeur** · 08/04/2009, 10h15

je suis dessus pour les fuites ^^ je vous redis dans 5 minutes

**SpaceFrog** · 08/04/2009, 10h16

sinon je me demande bien à quoi sert le clearInterval

**le_chomeur** · 08/04/2009, 10h21

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 :

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

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

**Bovino** · 08/04/2009, 10h31

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

**yamatoshi** · 08/04/2009, 10h33

Envoyé par javatwister

Code :

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

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

Ca marche pas javatwister

Firebug me retourne ceci dès pour i=0

Code :

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

1
2
 
invalid increment operand

Boucle for avec un pas !

JavaScript

Discussions similaires

Partager

Partager