Création de sites web en éco-conception

28/05/2013 You've used the same selector more than once !

... est un avertissement envoyé par jQuery lorsqu'on effectue plusieurs fois la même sélection d'éléments.

Démonstration du problème

Ouvrez Firebug et amusez-vous à cocher et décocher les cases ci-dessous à l'aide du bouton.

Coche Cache Quiche

Vous devriez voir apparaître le message suivant :

You've used the same selector more than once.

Voici le code source de ce mini-formulaire :

$(document).ready(function(){ $('body').on('click','#toile47_button',function() { if ($(this).html()=="coche tout") { $("[name='toile47_cb']").attr("checked","checked"); $(this).html("vide tout"); } else { $("[name='toile47_cb']").removeAttr("checked"); $(this).html("coche tout"); } }); });

On constate que le sélecteur [name='toile47_cb'] est appelé à chaque fois qu'on clique sur le bouton.

Le warning envoyé par jQuery est marqué au coin du bon sens. En effet, pourquoi effectuer plusieurs fois la même recherche alors qu'on peut améliorer les performances en mettant en cache ladite recherche ?

C'est ce que nous allons faire à présent : stocker la sélection d'éléments dans une variable globale.

Résolution du problème

Essayez ce bouton à présent :

Coche Cache Quiche

Plus aucun avertissement dans Firebug.

Le code source :

var coucou_selection=false; $(document).ready(function(){ $('body').on('click','#toile48_button',function() { if (!coucou_selection) { coucou_selection=$("[name='toile48_cb']"); }; if ($(this).html()=="coche tout") { coucou_selection.attr("checked","checked"); $(this).html("vide tout"); } else { coucou_selection.removeAttr("checked"); $(this).html("coche tout"); } }); });

Le sélecteur [name='toile48_cb'] n'est utilisé qu'une seule fois et son résultat est stocké dans la variable globale coucou_selection.

Commentaires

Ajouter un commentaire :