Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1492 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Gestionnaires d'evenements Javascript lents à se creer

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Gestionnaires d'evenements Javascript lents à se creer

n°1695831
Decapfour
Posté le 02-03-2008 à 17:30:25  profilanswer
 

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
mood
Publicité
Posté le 02-03-2008 à 17:30:25  profilanswer
 

n°1696557
Decapfour
Posté le 03-03-2008 à 20:29:50  profilanswer
 

up :/

n°1696586
gatsu35
Blablaté par Harko
Posté le 03-03-2008 à 21:11:54  profilanswer
 

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

n°1697233
Decapfour
Posté le 04-03-2008 à 22:20:02  profilanswer
 

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
n°1697235
theredled
● REC
Posté le 04-03-2008 à 22:46:31  profilanswer
 

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
n°1697242
FlorentG
Unité de Masse
Posté le 04-03-2008 à 23:02:53  profilanswer
 

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

n°1697247
theredled
● REC
Posté le 04-03-2008 à 23:18:34  profilanswer
 

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
n°1697519
Decapfour
Posté le 05-03-2008 à 13:29:16  profilanswer
 

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.

n°1697813
Decapfour
Posté le 05-03-2008 à 18:06:52  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Gestionnaires d'evenements Javascript lents à se creer

 

Sujets relatifs
Créer une fonction en VBAcréer un macro sur excel
Javascript Objet et bonnes pratiquescréer une page pour chaque site sur mon annuaire
[JOOMLA] recherche organisation d'evenements[javascript] Reload d'un div de fichier php
écouteur d'événements Flashreload d'une frame a partir d'une autre. PHP/javascript
Equivalent de ma condition php en javascript (ereg, voire checkdate)Interaction php javascript
Plus de sujets relatifs à : Gestionnaires d'evenements Javascript lents à se creer


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR