[JS] Variable qui change lors du relancement de la même fonction

Bonjour,
J'ai codé une fonction qui permet d'annuler l'effet, cet a dire qu'il va diminuer progressivement la hauteur d'un div jusqu'a zéro.

Ca donne ceci:

function detogglerPortfolio(url,div,methode,initialisationScrollbar,hauteur)
{
	hauteurDiv = document.getElementById(div).offsetHeight;
	//alert("1: " + hauteurDiv);
	if (hauteurDiv > 11)
	{
		document.getElementById(div).innerHTML = "";
		document.getElementById(div).style.paddingTop = "11px";
		document.getElementById(div).style.paddingBottom = "0px";
		//alert("2: " + hauteurDiv);
		hauteurDiv --;
		//alert("3: " + hauteurDiv);
		document.getElementById(div).style.height = hauteurDiv + "px";
		//alert("4: " + hauteurDiv);
		repetitionDetogglerPortfolio = setTimeout('detogglerPortfolio("' + url + '","' + div + '","' + methode + '","' + initialisationScrollbar + '",' + hauteur + ');', 0005);
		//alert("5: " + hauteurDiv);
		hauteurDivPage = document.getElementById('page').offsetHeight;
	}
	else
	if (hauteurDiv == 11)
	{
		clearTimeout(repetitionDetogglerPortfolio);
	}
}

Cependant grâce au differentes alertes placées a des points stratégiques, je me suis apercu que la varaible hauteurDiv passait entre l'alerte 5 et l'alerte 1 (Pendant le relancement de la fonction) de 340 a 352
Je ne sais d'ou cela vient.
Merci de votre aide.

fef
Modifié par iFef (05 Aug 2007 - 13:20)

Ecoute iFef, je ne comprends pas grand-chose à ton truc.

1/ Tu passes en paramètre à ta fonction une tétrachiée de paramètres dont elle ne se sert pas,
2/ Tu dis vouloir diminuer jusqu'à 0 et je ne vois que 11 de testé en tant que valeur,
3/ Tu parles de la hauteur d'un div et je ne sais pas bien ce que tu entends par là. Si il s'agit de sa hauteur (height) ou s'il s'agit de sa position y dans la page.
4/ S'il s'agit de la hauteur (height), je ne vois alors pas bien de rapport avec le offsetHeight que tu utilises pour définir le hauteurDiv avec lequel tu joues.
5/ C'est quoi que cette variable repetitionDetogglerPortfoli passée à clearTimeout ?
6/...

Bref... sois plus... clair... stp !
Modifié par aCOSwt (05 Aug 2007 - 14:58)

aCOSwt a écrit :
Ecoute iFef, je ne comprends pas grand-chose à ton truc.

1/ Tu passes en paramètre à ta fonction une tétrachiée de paramètres dont elle ne se sert pas,
2/ Tu dis vouloir diminuer jusqu'à 0 et je ne vois que 11 de testé en tant que valeur,
3/ Tu parles de la hauteur d'un div et je ne sais pas bien ce que tu entends par là. Si il s'agit de sa hauteur (height) ou s'il s'agit de sa position y dans la page.
4/ S'il s'agit de la hauteur (height), je ne vois alors pas bien de rapport avec le offsetHeight que tu utilises pour définir le hauteurDiv avec lequel tu joues.
5/ C'est quoi que cette variable repetitionDetogglerPortfoli passée à clearTimeout ?
6/...

Bref... sois plus... clair... stp !

1 et 2 => voila:

unction detogglerPortfolio(div)
{
	hauteurDiv = document.getElementById(div).offsetHeight;
	if (hauteurDiv > 0)
	{
		document.getElementById(div).innerHTML = "";
		document.getElementById(div).style.paddingTop = "11px";
		document.getElementById(div).style.paddingBottom = "0px";
		hauteurDiv --;
		document.getElementById(div).style.height = hauteurDiv + "px";
		repetitionDetogglerPortfolio = setTimeout("detogglerPortfolio('div')", 0005);
		hauteurDivPage = document.getElementById('page').offsetHeight;

	}
	else
	if (hauteurDiv == 0)
	{
		clearTimeout(repetitionDetogglerPortfolio);
	}
}

3 => Oui il s'agit bien de sa hauteur, height
4 => ce code me permet de recuperer la hateur actuelle du div.
5 => pour stopper la repetition du code

S'est mieux ?
Modifié par iFef (05 Aug 2007 - 16:42)

Bonjour,

Ah, les imbrications de variables dans les setTimeOut, toujours la même histoire.

Essaye ça :

repetitionDetogglerPortfolio = setTimeout("detogglerPortfolio('[b]" + div + "[/b]')", 0005);

<edit> oups, je viens de voir que c'était pour simplifier la lecture que tu avais mis ta variable comme ça...
Modifié par Julien Royer (06 Aug 2007 - 10:44)

iFef a écrit :

S'est mieux ?

Yess !

Je crois que c'est ton 'div' dans l'appel de setTimeout qui fait clocher.
En fait... forcément car il est fort probable que tu n'aies pas ton div identifié en tant que div... lol !
Ergo, s'il fait bien le boulot la première fois, au second passage, il le fait sur... n'importe quoi.

Par ailleurs, mais c'est une opinion personnelle, je n'aime pas trop ta façon de gérer l'appel. Je préfère écrire comme suit :

function detogglerPortfolio(div){

	hauteurDiv = document.getElementById(div).offsetHeight;
	if (hauteurDiv > 0){
		document.getElementById(div).innerHTML = "";
		document.getElementById(div).style.paddingTop = "0px";
		document.getElementById(div).style.paddingBottom = "0px";
		hauteurDiv--;
		document.getElementById(div).style.height = hauteurDiv+"px";
                setTimeout("detogglerPorfolio('"+div+"')",5);}}

Je trouve cela plus simple mais... chacun ses goûts.
Le plus important dans l'histoire étant :

setTimeout("detogglerPorfolio('"+div+"')",5);

Bonjour,

par pitié n'utilise pas un string en paramètre de window.setTimeout, ca tue les perfs ... passait plutot une function, ca évite l'éval associé

window.setTimeout(function(){
     detogglerPorfolio(div)
}, 5); 

En changeant la structure de ton code et en utilisant un objet, on peut meme imaginer se passer de la fonction temporaire pour n'utiliser que :

window.setTimeout(detogglerPortfolio, 5); 

Les perfs seront encore meilleures, mais il y aurais je pense d'autres choses à améliorer niveau perf. Sais tu que l'être humain voit les choses fluides à partir de 24 images par secondes, soit environ une image toutes les 40ms ? alors pourquoi modifier la hauteur toutes les 5ms ?

Autre point amélioration perf : document.getElementById est une fonction couteuse !

le mieux serait donc de faire appel qu'une seule fois à cette fonction. C'est à dire avant le premier appel, div serait alors de type DomElement plutot que String.

et enfin, je ne vois pas où sont déclaré les variables hauteurDiv & co ... j'espere qu'elles sont bien déclaré ! Car sinon elles seront enregistré dans le scope global donc jamais collecté et bonjour les perfs (et les problèmes que cela peut entrainer)