Discussion :

[macumba]

Bonjour,

J'ai un problème de lenteur sous IE10/IE9 avec le branchement de l'evt onclick(50ms pour 7 branchements) sur un div ou span.(environ 5 fois plus lent que sur IE8(8ms pour 7 branchements), sous Firefox c'est quasiment instantané).
Le pb est que j'ai 280 evts à brancher(je perd donc 2 secondes juste pour brancher mes cellules et l'affichage devient sacadé).

J'ai essayé de procéder en affectant directement le innerHTML ou en passant par un setAtrribute $(nomcell).setAttribute("onclick","...");

Le résultat est le même. Auriez vous une piste pour accélerer la chose?

Code :

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

1
2
3
4
for (var j=0; j<7;j++){
	var nomcell = "jssel_" + id +"$"+  j;
	$(nomcell).setAttribute("onclick","setJ('"+nomcell+ "','"+ j+ "','"+ mode +  "')");
}

Merci d'avance.

[SpaceFrog]

Jquery ??? setAttribute pour un onclick ...

Code :

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

 $(nomcell).click(function(){setJ(nomcell, j,mode);});

[arnogues]

Attention aux effets de bords, le monsieur est dans une boucle
Et il n'est pas sous jquery mais plutôt sous mootools ou equivalent, regarde ya pas de # devant l'id de son élément :o

Code :

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

1
2
3
4
5
6
7
8
9
10
 for (var j = 0; j < 7; j++) {
     with({
         nomcell: "jssel_" + id + "$" + j,
         j: j
     }) {
         $(nomcell).addEvent('click', function () {
             setJ(nomcell, j, mode);
         });
     }
 }

Oui ici j'utilise le with(); certains vont trouver ça moche, mais c'est une technique encore plus propre qu'une fonction anonyme autoexécutée.

[Bovino]

Non... le plus propre, c'est d'éviter de déclarer 280 événements identiques !

Le pb est que j'ai 280 evts à brancher

Il faut donc utiliser ici la délégation d'événement : on utilise un seul événement déclaré sur le plus proche ancêtre commun, et quand l'événement est déclenché, on vérifie si l'élément qui l'a réellement reçu est éligible !

[SpaceFrog]

ou en rattachant les paramètres à l'objet ...
mais on en sait trop peu sur l'origine de ces paramètres pour deviner leur scope

[arnogues]

Non... le plus propre, c'est d'éviter de déclarer 280 événements identiques !


Il faut donc utiliser ici la délégation d'événement : on utilise un seul événement déclaré sur le plus proche ancêtre commun, et quand l'événement est déclenché, on vérifie si l'élément qui l'a réellement reçu est éligible !

Ah oui j'avais pas vu

[macumba]

En fait j'utilise prototype.

Je ne redémarre pas systématiquement mon PC, je le met en mode Veille pendant plusieurs jours et suis sous W8 Pro).

Je viens de redémarrer et là les pbs de temps de réponse sont quasi inexistant sous IE10(48 ms pour brancher les 280 evts). Avant de redémarrer, j'avais vider le cache du navigateur et j'ai constaté le même pb de temps de réponse(2s pour tout charger).

Tu pourrais préciser ton idée Bovino svp?

[macumba]

Je viens de trouver un tuto sur la délégation d'évts sous jquery.
Il n'y aurait pas moyen de se passer de jquery(sinon je vais adapter mon code)?

Merci pour l'idée en tout cas.

[SpaceFrog]

cf ce que t'a proposé arnoques ...

[macumba]

J'ai adapté la méthode de arnoques comme ci-dessous :

Code :

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

1
2
3
4
5
6
with({
	nomcell: "jssel_" + id + "$" + jour,
	j: j
}) {
	$(nomcell).onclick = function(){setJ(nomcell, j, mode);};
}

Cela me permet de passer de 35 ms à 48 ms. J'attend d'avoir des temps de réponse plus important pour adapter la méthode de bovino si besoin.

Merci à tous pour votre aide.

[Bovino]

La délégation existe quasiment exactement de la même manière avec Prototype :

Code :

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

1
2
3
$("messages").on("click", "a.comment", function(event, element) {
   // ...
});

Ou en vanilla JavaScript

Code :

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

1
2
3
4
5
6
7
8
9
document.getElementById('messages').onclick = function(event){
    // On recherche l'élément ayant généré l'événement à partir de l'objet event
    var sourceElem = event.target ? event.target : event.srcElement;
    // Si cet élément ne possède pas la classe voulue, on sort
    if(!/\bcomment\b/.test(sourceElem.className){
        return;
    }
    // Reste du code si l'élément correspond
}

[macumba]

Désolé pour la réponse tardive, mais la délégation de dépendance fonctionne correctement sous FF, IE9 et 10, mais hélas pose problème en IE7(et il me semble IE8. J'ai le debugger IE qui m'indique que "on" n'existe pas pour l'objet considéré... Je reste donc sur la méthode d'arnoques.
Merci à tous.