Gestionnaires d'evenements Javascript lents à se creer

Gestionnaires d'evenements Javascript lents à se creer - HTML/CSS - Programmation

Marsh Posté le 02-03-2008 à 17:30:25    

Bonjour
Je viens de me rendre compte qu'en fait j'ai enomément de gestionaire d'evenements crées sur une page HTML ( style 100 sur une page ) avec du code direct dedans.
Ya t'il un moyen pour que ma page s'affiche plus vite? ( en effet quand je desactive le javascript, la page met 5-6 sec de moins a se charger. )
 
En gros j'ai un tableau, et j'ai beaucoup de traitements a faire en fonction des actions de l'utilisateur sur ce tableau, donc je crée beaucoup de gestionnaires d'evenements.
Sur un pc recent ca peut passer, mais sur une vieille becanne c'est galère...
Ya pas une manière de gerer les evenements sans ajouter 40000  gestionnaires?


Message édité par Decapfour le 02-03-2008 à 18:11:02
Reply

Marsh Posté le 02-03-2008 à 17:30:25   

Reply

Marsh Posté le 03-03-2008 à 20:29:50    

up :/

Reply

Marsh Posté le 03-03-2008 à 21:11:54    

et on pourrait voir le code JS qui te pose un tel pb s'il te plait ?

Reply

Marsh Posté le 04-03-2008 à 22:20:02    

Code :
  1. <td ><input  type='text' id=compagnie_".$valeur['id_produit']."_".$valeur['id_date']." value='".$valeur['compagnie']."' onSelect='javascript:tagmodif(".$valeur['id_date'].",".$valeur['id_produit']." );' onClick='javascript:tagmodif(".$valeur['id_date'].",".$valeur['id_produit']." );'></td>
  2. <td ><input  type='text' id=rq_".$valeur['id_produit']."_".$valeur['id_date']." value='".$valeur['rq']."' onChange='javascript:calcul_total(".$valeur['id_date'].",".$valeur['id_produit']." );javascript:calcul_dispo(".$valeur['id_date'].",".$valeur['id_produit']." );' onClick='javascript:tagmodif(".$valeur['id_date'].",".$valeur['id_produit']." );' onSelect='javascript:tagmodif(".$valeur['id_date'].",".$valeur['id_produit']." );'></td>
  3. <td ><input  type='text' id=r1_".$valeur['id_produit']."_".$valeur['id_date']." value='".$valeur['r1']."'
  4. onChange='javascript:calcul_total(".$valeur['id_date'].",".$valeur['id_produit']." );javascript:calcul_dispo(".$valeur['id_date'].",".$valeur['id_produit']." );' onClick='javascript:tagmodif(".$valeur['id_date'].",".$valeur['id_produit']." );' onSelect='javascript:tagmodif(".$valeur['id_date'].",".$valeur['id_produit']." );'></td>
  5. <td ><input type='text' id=r2_".$valeur['id_produit']."_".$valeur['id_date']." value='".$valeur['r2']."' onChange='javascript:calcul_total(".$valeur['id_date'].",".$valeur['id_produit']." );javascript:calcul_dispo(".$valeur['id_date'].",".$valeur['id_produit']." );' onClick='javascript:tagmodif(".$valeur['id_date'].",".$valeur['id_produit']." );' onSelect='javascript:tagmodif(".$valeur['id_date'].",".$valeur['id_produit']." );'></td>
  6. <td ><input  type='text' id=r3_".$valeur['id_produit']."_".$valeur['id_date']." value='".$valeur['r3']."' onChange='javascript:calcul_total(".$valeur['id_date'].",".$valeur['id_produit']." );javascript:calcul_dispo(".$valeur['id_date'].",".$valeur['id_produit']." );' onClick='javascript:tagmodif(".$valeur['id_date'].",".$valeur['id_produit']." );' onSelect='javascript:tagmodif(".$valeur['id_date'].",".$valeur['id_produit']." );'></td>
  7. <td><input type='text' id=ss_".$valeur['id_produit']."_".$valeur['id_date']." value='".$valeur['ss']."' onChange='javascript:calcul_total(".$valeur['id_date'].",".$valeur['id_produit']." );javascript:calcul_dispo(".$valeur['id_date'].",".$valeur['id_produit']." );' onClick='javascript:tagmodif(".$valeur['id_date'].",".$valeur['id_produit']." );' onSelect='javascript:tagmodif(".$valeur['id_date'].",".$valeur['id_produit']." );'></td>


 
En gros vous voyez ya un max d'evenement
J'avais pensé a mettre en div encandrant ces cellules, et mettre ces gestionnaires sur ce div au lieu d'en creer pas mal, mais faut que je vois ce que ca donne.
Sinon pour caux qui y ont pensé, le onChange ne marche pas totalement, c'est pour ca que j'ai mis des onSelect et des onClick


Message édité par Decapfour le 04-03-2008 à 22:24:12
Reply

Marsh Posté le 04-03-2008 à 22:46:31    

Juste comme ça :
- le "javascript:" ne sert absolument à rien dans les onclick etc
- c'est imbitablement écrit, faudrait mieux que tu affectes tes évenements  en JS, au chargement de la page, avec le DomReady d'un framework genre mootools ou jquery.
- ça me parait louche tes 3 évenement par balise, t'es absolument sûr que t'es obligé [:pingouino dei]
- qqch me dit que le PHP est pas triste non plus :whistle:


Message édité par theredled le 04-03-2008 à 22:50:30

---------------
Contes de fées en yaourt --- --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique
Reply

Marsh Posté le 04-03-2008 à 23:02:53    

Oh bordel [:pingouino] Y'a énormément matière à optimisation dans tous les sens là.
 
Mais faut d'abord retaper le PHP. Ch'ais pas, déjà en concaténant une bonne fois pour toutes l'id de l'élément

Reply

Marsh Posté le 04-03-2008 à 23:18:34    

Et en répétant pas 6 fois les 6 mêmes lignes avec un bout de miette qui change à chaque fois...


---------------
Contes de fées en yaourt --- --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique
Reply

Marsh Posté le 05-03-2008 à 13:29:16    

Merci pour vos reponses :)
 
Ok le php pue, mais c'est pas vraiment ça le problème, en fait ca met 80-100ms a se faire le php, donc encore...
Mais vous avez raison, c'est pas lisible, c'est juste que j'ai l'habitude de le voir comme ça, j'avais pas vraiment remarqué. Je vais changer ça.
En gros ce que je veux que ca fasse :  
 
- A chaque fois que dans un des inputs de la ligne, une valeur est changée, le js envoie l'id de la ligne dans un tableau
 
- A chaque fois qu'une des valeurs de certains inputs est changée, il recalcule la valeur d'autres inputs.
 
Le tout doit marcher :
Si l'utilisateur selectionne juste l'interrieur de l'input, sans cliquer dedans
Si l'utilisateur change un input, sans cliquer hors de l'input, mais directement sur le bouton valider.
 
Et le onChange j'avais eu certains problèmes avec. Mais je vais reverifier.
 
 
Le tout, en utilisant le moins d'evenements possibles par ligne du tableau, quand 100 lignes s'affichent, c'est assez hard pour les vieilles machines.
 
Je vous reposte le code modifié tout a l'heure.
 
Sinon theredled, tu peux m'expliquer rapidement comment tu penses que je pourrais m'y prendre pour affecter ca direct dans le php?
En fait j'appelle en ajax la page du dessous avec les lignes que vous avez vues, et j'ai aucune idée ce que je vais avoir comme id au retour.

Reply

Marsh Posté le 05-03-2008 à 18:06:52    

Code :
  1. $retour .=("
  2. <td class='td_resultat'>
  3.   <input class='input_resultat' type='text' id=compagnie_".$id." value='".$valeur['compagnie']."' onChange='tagmodif(".$id_date.",".$id_produit." );'></td>
  4.  <td class='td_resultat'>
  5.   <input class='input_resultat' style='font-weight:bold;' type='text' id=rq_".$id." value='".$valeur['rq']."' onChange='calcul_total(".$id_date.",".$id_produit." );calcul_dispo(".$id_date.",".$id_produit." );tagmodif(".$id_date.",".$id_produit." );'>
  6.  </td>
  7.  <td class='td_resultat'>
  8.   <input class='input_resultat' style='font-weight:bold;' type='text' id=r1_".$id." value='".$valeur['r1']."' onChange='calcul_total(".$id_date.",".$id_produit." );calcul_dispo(".$id_date.",".$id_produit." );tagmodif(".$id_date.",".$id_produit." );'>
  9.  </td>
  10.  <td class='td_resultat'>
  11.   <input class='input_resultat' style='font-weight:bold;' type='text' id=r2_".$id." value='".$valeur['r2']."' onChange='calcul_total(".$id_date.",".$id_produit." );calcul_dispo(".$id_date.",".$id_produit." );tagmodif(".$id_date.",".$id_produit." );'>
  12.  </td>
  13.  <td class='td_resultat'>
  14.   <input class='input_resultat' style='font-weight:bold;' type='text' id=r3_".$id." value='".$valeur['r3']."' onChange='calcul_total(".$id_date.",".$id_produit." );calcul_dispo(".$id_date.",".$id_produit." );tagmodif(".$id_date.",".$id_produit." );'>
  15.  </td>
  16.  <td class='td_resultat'>
  17.   <input class='input_resultat' style='font-weight:bold;' type='text' id=ss_".$id." value='".$valeur['ss']."' onChange='calcul_total(".$id_date.",".$id_produit." );calcul_dispo(".$id_date.",".$id_produit." );tagmodif(".$id_date.",".$id_produit." );'>
  18.  </td>
  19. <td class='td_resultat'>
  20.   <input readonly class='input_resultat' style='background:#CCCCCC;font-weight:bold;' type='text' id=total_".$id." value='".$valeur['total']."' onChange='tagmodif(".$id_date.",".$id_produit." );calcul_dispo(".$id_date.",".$id_produit." );'>
  21.  </td>
  22.  <td class='td_resultat'>
  23.   <input class='input_resultat' style='font-weight:bold;' type='text' id=vente_".$id." value='".$valeur['vente']."' onChange='tagmodif(".$id_date.",".$id_produit." );calcul_dispo(".$id_date.",".$id_produit." );' onDblclick='info_dossier(".$id_date.",".$id_produit." );'>
  24.  </td>
  25.  <td class='td_resultat'>
  26.   <input class='input_resultat' style='font-weight:bold;' type='text' id=option_".$id." value='".$valeur['option']."' onChange='tagmodif(".$id_date.",".$id_produit." );calcul_dispo(".$id_date.",".$id_produit." );' onDblclick='info_dossier(".$id_date.",".$id_produit." );'>
  27.  </td>
  28. " );


 
Voila c'est mieux.
 
Ca me fait gagner une seconde. C'est deja bien.
Au fait c'est quoi la difference entre onclick et onClick?
 
Sinon ya pas un moyen de rendre ca encore plus rapide?
Le truc c'est que ca affiche genre 1.5 mega de texte/image, donc la moulinette est un peu longue


Message édité par Decapfour le 05-03-2008 à 18:07:43
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed