JQUERY : texte clignotant qui clignote n'importe comment ! Pourquoi ?

Publié le 07-10-2019
etoiles_notation etoiles_notation etoiles_notation etoiles_notation etoiles_notation
Votes : 1 - Note : 5




Et si on parlait focus ?



jquery


JQUERY : texte clignotant qui clignote n'importe comment  ! Pourquoi ?

Focus, le petit truc auquel on ne pense pas assez



Il y a plusieurs solutions pour faire clignoter un texte ou autre en JQuery : toggle, animate, fade, etc... couplées en général avec un setInterval().

Ces différentes solutions sont soumises, pour certaines d'entre elles, à un effet pervers dû à la perte de focus : stoppées pendant cette perte, elle rattrapent leur retard quand la fenêtre retrouve le focus ; de là votre image qui se promenait tranquillement devient folle, idem pour votre texte qui se met à clignoter comme un fanatique du clignotement, jusqu'à ce qu'ils aient récupéré leur retard.

C'est pénible, ça fait moche et ça inquiète le visiteur.


Il y a pourtant une toute petite solution ultra-simple : le focus.

Il suffit de dire à votre script : "si la fenêtre a le focus, joue l'animation". En code, ça donne ça :

if(document.hasFocus())
//animation
}

Sous-entendu : "si elle ne l'a pas, reste couché".

Voici quelques tests :


Quelques remarques : ces bouts de codes sont dans une iframe qui n'a pas le focus par défaut : il faut donc cliquer dessus pour le lui donner ; Ensuite il suffit d'aller dans un autre onglet quelques instants et de revenir pour constater que dans deux cas, les textes clignotants sans la condition hasFocus s'affolent, le temps de récupérer leur retard.

A noter que toggle() et fadeToggle() ne sont pas sensibles à la perte de focus() placés dans un setInterval.

help “ Seulement trois mots suffisent !”



A titre d'explication, voici le code pour les fade out/in :
Avec la condition :

 setInterval(function() {
if(document.hasFocus()) {
$("#cligno").fadeOut(100).fadeIn(100);
}
}, 1000 );



et sans :

 setInterval(function() {
$("#cligno1").fadeOut(100).fadeIn(100);
}, 1000 );



Ne serait-ce pas dommage de s'en priver ? ;-)



Modifié le 08-10-2019

Commentaires

Pas encore de commentaire

Publier un commentaire :



capcha   






GB-Net.fr 2019