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);

??