Discussion :

[talrashha]

Bonjour,

J'ai un problème auquel je ne comprend rien du tout.
Je suis en train de développer un site, où tout le contenu se trouve dans 4 objets, et ces objets sont susceptible de se déplacer à travers l'écran. Cet effet de déplacement est créer par des appels successif de la fonction SetTimeOut() séparé d'1ms. A chaque appel, l'objet est déplacer de "x" pixel, x variant à chaque itération (pour donner un effet d'accéleration ou de ralentissement).

Maintenant, le problème, c'est que mon code à l'air de fonctionner mais me pose quelque souci plutôt aléatoire :
- Sur IE et sur Safari, tout fonctionne très bien.
- Sur FireFox (version 3 ou 2), il y a des ralentissement, le déplacement n'est pas toujours fluide, et le temps de déplacement est beaucoup plus long et assez aléatoire, par rapport aux autres navigateurs.
Ce qui est terrible, c'est que la vitesse varie selon les PC, et par exemple, sous MacOs, le déplacement fonctionne parfaitement.

De plus, ces ralentissements se produisent uniquement lorsque je déplace plusieurs objets en même temps, c'est à dire qu'il y a jusqu'à 4 SetTimeOut indépendant qui fonctionnent en même temps.

Enfin, ces tests ont été fait directement sur mon serveur Apache, et lorsque je prend le code et que je le fais tourner sur EasyPHP, tout fonctionne.

Je ne comprend plus rien
Une idée?

[Auteur]

bonjour,

Par hasard, tu n'observes pas de ralentissement ou d'accélération lors des déplacements lorsque tu déplaces ta souris dans le document ?

[talrashha]

Bonsoir,

Euh, je ne sais pas exactement de quoi tu parle. J'ai donc essayé. Lors du chargement, si je déplace ma souris comme un fou, ça ne change rien.
Par contre, si j'essaye de sélectionner un élément (en le noircissant) et en continuant de déplacer ma souris, ca ralentis encore plus sous Firefox, uniquement.

[SpaceFrog]

faudrait voir comment le code est fait.. et surtout ce que lance le setTimout, a mon avis si il lançait une nouvelle instance de fonction tu n'aurais plus ce souci

[Auteur]

Bonsoir,

Euh, je ne sais pas exactement de quoi tu parle. J'ai donc essayé. Lors du chargement, si je déplace ma souris comme un fou, ça ne change rien.
Par contre, si j'essaye de sélectionner un élément (en le noircissant) et en continuant de déplacer ma souris, ca ralentis encore plus sous Firefox, uniquement.

Disons que j'ai réalisé quelques scripts qui réalisent des défilements d'images ou de textes (des scripts équivalents à ce que fait une balise marquee). Le défilement était parfois saccadé ou ralenti. Il suffisait que je déplace la souris dans le document pour le défilement soit plus fluide. C'était très visible sous la version 2 de Firefox.

De plus, ces ralentissements se produisent uniquement lorsque je déplace plusieurs objets en même temps, c'est à dire qu'il y a jusqu'à 4 SetTimeOut indépendant qui fonctionnent en même temps.

et chaque setTimeout déclenche une fonction dans un délai de 1ms ?
Il faudrait voir comment sont gérés tes setTimeout. Un bout de code ?

[talrashha]

Bonjour,

D'accord, voilà comment fonctionne le truc :
J'ai une fonction "Create_Object()" qui créer un objet avec tout un tas d'attribut calculé dont je me sert pour trouver la distance à déplacer à chaque itération (elle est longue, je vous la fournirait en partie si nécessaire).

La fonction déplace est appelé sur de ces objets. A chaque itération, elle déplace l'objet sur l'axe X puis sur l'axe Y, puis se rappelle jusqu'à une condition "evalue".

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
 
function deplace(objet, pas_X, pas_fin_X, nb_change_X, pas_Y, pas_fin_Y, nb_change_Y) {
	//deplacement de l'objet	
	var tmpX=pas_X-objet.act*nb_change_X;
	var tmpY=pas_Y-objet.act*nb_change_Y;
	var evalue;
	if(objet.act==1) {
		evalue=(pas_X > pas_fin_X)||(pas_Y > pas_fin_Y);
	}
	else {
		evalue=(pas_X < pas_fin_X)||(pas_Y < pas_fin_Y);
	}
	document.getElementById(objet.name).style.left=document.getElementById(objet.name).offsetLeft+objet.act*objet.sensX*pas_X+"px";
	document.getElementById(objet.name).style.top=document.getElementById(objet.name).offsetTop+objet.act*objet.sensY*pas_Y+"px";
 
	//test de fin
	if(evalue) {	
		objet.process=setTimeout( function() { deplace(objet, tmpX, pas_fin_X, nb_change_X, tmpY, pas_fin_Y, nb_change_Y); }, objet.interv);
	}
	else {
		clearTimeout(objet.process);
		if(objet.act==1) {
			objet.set_show();
		}
		else {
			objet.set_hide();
		}
		this.act=0;
	}
}

Quelques remarques :
- this.interv est initialisé à la création des objets, et vaut 1.
- lorsque les objets se déplacent, les calculs sont fait pour qu'il se déplacent tous durant le même temps. Lorsqu'un objet arrive en bout de course, tous les autres y arrivent aussi.

Voila, éclairez moi

[SpaceFrog]

Code :

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

objet.process=setTimeout( function() {new  deplace(objet, tmpX, pas_fin_X, nb_change_X, tmpY, pas_fin_Y, nb_change_Y); }, objet.interv);

??

[Sub0]

1 ms, ça fait court! Selon moi, la page n'a même pas le temps d'effectuer l'opération de déplacement qu'il faudrait déjà la refaire (d'où la saturation)...

Peut-être devrais-tu augmenter le nombre de pixel pour chaque itération et augmenter aussi le délai de setTimeout.
Je pense que si tu doses bien ces 2 paramètres, l'effet de déplacement devrait rester le même, mais cela consomerait moins de ressource.

[talrashha]

Salut,

Je viens de tester ce que tu as mis... mais je ne constate aucun changement. Vous pouvez jeter un coup d'œil sur le site pour y voir le résultat à l'adresse http://talrashha.no-ip.org. Vous pourrez constater par vous même que le changement est flagrant sous IE ou sur FF.

Par contre, par curiosité : je n'ai pas compris pourquoi il faudrait rajouter un "new" ici... pour moi, "deplace" n'est qu'une fonction, il ne devrait donc pas être nécessaire de mettre un "new" qui est pour moi une façon d'instancier un objet...

[talrashha]

1 ms, ça fait court! Selon moi, la page n'a même pas le temps d'effectuer l'opération de déplacement qu'il faudrait déjà la refaire (d'où la saturation)...

Peut-être devrais-tu augmenter le nombre de pixel pour chaque itération et augmenter aussi le délai de setTimeout.

J'ai songé à cela, j'ai pas encore vraiment trouvé de réglages optimaux, mais dans le principe, plus j'augmente l'intervalle, moins c'est fluide...
L'autre truc bizzard, c'est que mon système fonctionne sur les autres navigateurs, donc soit il y a effectivement une gestion du settimeOut qui limite son utilisation pour réduire la puissance nécessaire, et dans ce cas, il n'existe pas d'autre solution que celle que tu m'as cité, doit le problème viens d'ailleurs...
Je vais quand même faire le calcul pour faire quelques tests en tablant sur 25 images par seconde, mais cela me parait tout de même étrange...

[talrashha]

Re bonsoir,

Je viens de faire un test en changeant l'intervalle en 40ms au lieu de 1... et rien ne change comme je le pensais...
Le résultat reste totalement fluide sur IE, mais saccadé sur FF