La problématique de l’Ajax pour du Testing en surcouche

La problématique de l’Ajax pour du Testing en surcouche

par ,
le 2 janvier 2013

0
0

Il est fréquent qu’il soit nécessaire de déplacer des éléments en javascript sur des pages testées, de les remplacer ou modifier et dans la plupart des cas, il s’agira d’effectuer ces modifications en une seule fois, au chargement du document.

Mais il arrive que le site ne se charge pas d’un seul coup, ou se modifie lors d’une action, et cela, sans rechargement de page grâce à de l’Ajax.
Les modifications effectuées au chargement ne sont donc pas appliquées à ce nouveau contenu. Les classes ne sont pas ajoutées, les éléments ne sont pas déplacés ou repositionnés et le design de votre site testé s’en voit cassé.
Bref, seul le css que vous avez ajouté pour ce test agira sur l’ajax.

Logo Ajax

Dans le meilleur des mondes, vous auriez un callback de l’appel Ajax et il s’agirait de le remplacer par le vôtre ou de s’y glisser pour relancer les modifications au retour de l’Ajax.

Malheureusement ce n’est pas toujours possible et vous préfererez souvent éviter ces manoeuvres qui sont parfois risquées ou fastidieuses à mettre en place.
L’idée est donc de placer un écouteur générique qui va détecter le retour des appels Ajax sur la page, et votre meilleur ami, jQuery a créé pour vous la fonction ajaxSuccess.

Celle ci s’utilise de la sorte :

jQuery(‘#element’).ajaxSuccess(function(){
 /** Ce que vous souhaitez faire au retour Ajax */
});

/! Attention toutefois : ce script, tout comme un callback classique, est un procédé assez gourmand en ressources et pour peu qu’il y ai de nombreux appels ajax sur votre page, votre fonction de callback s’executera de nombreuses fois et l’ensemble des fonctions qu’elle contient également. On peut très vite atteindre un nombre faramineux d’appels en une seule fois.

J’ai pour ma part déjà rencontré cette problèmatique et voici ma solution :
1) Créer un compteur global et l’incrémenter à chaque appel Ajax (dans l’Ajax Success), le réinitialiser au delà d’un certain palier. (10 maximum par exemple)
2) Dans l’appel Ajax, déclencher votre fonction suite à un setTimeout dont la durée serait multipliée par votre compteur global

Ainsi si vous choisissez 50 millisecondes de délai, la première fonction JS s’exécutera 50×1 millisecondes après l’appel la seconde 50×2 donc 100 millisecondes après, la troisième 150 etc.. et ainsi au lieu de 800 fonctions en une seule fois vous les différerez sur la longueur.
IE7 et 8 ont donc le temps de souffler et si vous avez encore des soucis de performances, essayez d’optimiser vos sélecteurs, d’éviter le jQuery quand l’équivalent Javascript est facile à mettre en place, de faire le plus de choses en un minimum de fonctions.

mots-clés :

, ,

articles à lire ensuite...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

0
0

La problématique de l’Ajax pour du Testing en surcouche