Discussion :

[Invité]

Bonjour,

Je me tourne vers vous après plusieurs tentatives ratées :
Comment empêcher une ou plusieurs actions/événements jQuery se produire lorsqu'un événement est déjà en cours d’exécution mais pas forcément sur le même élément ?

Exemple,

J'ai un menu déroulant qui sur l'événement .hover() se déroule. Si je le survole 3x, cet événement se produira 3 fois.

Autre exemple,

J'ai une liste d'albums photos, quand je clique sur un album il se produit une sorte d'animation vidéo mais si je clique en même temps sur un autre album ou sur deux (ou plus encore), et bien l'animation se produira autant de fois que j'ai cliqué sur d'albums.


Cdt

[danielhagnoul]

Bonsoir

N'oubliez pas qu'un ID doit être unique.

On peut supprimer un événement avec la méthode off() : http://api.jquery.com/off/

On peut avoir un événement qui ne se produira qu'une seule fois avec la méthode one() : http://api.jquery.com/one/.

[Invité]

Bonsoir danielhagnoul,

Oui bien sûr tous mes identifiants sont uniques ; je ne pense pas qu'il y ait un soucis à ce niveau là.

La fonction .one() ne correspond pas puisque l'événement doit se produire à chaque fois qu'on clique sur un l'élément, mais APRES l'animation vidéo.

Alors quand il y a plusieurs éléments, elle se lance à chaque fois que je clique sans attendre que les autres aient terminé donc pour résumer, il devrait être impossible de lancer un événement similaire pendant cette animation vidéo.

Il faut que j'explore la fonction .off() mais il ne me semble pas que je truove une réponse ici d'après ce que j'en ai vu.


Merci

[danielhagnoul]

Sans les codes (CSS, HTML, JS) pour examiner le problème...

[Invité]

Bon disons que le site est loin d'être terminé donc je voulais éviter de mettre un lien tout de suite.
Voilà un lien temporaire http://valef.fr/sites/spvconfrancon/content/photos.php pour visualiser le problème.

Cliquez sur plusieurs albums avec quelques secondes de décalage. Vous voyez que l'animation (il n'y a pas encore l'animation vidéo) se répète autant de fois.

Autre exemple : cliquez sur une photo plusieurs fois de suite rapidement, le "chargement" se répète à chaque fois.

Bonne chance

[danielhagnoul]

Bonjour

C'est un problème d'animation. Vous devez utiliser la méthode finish() pour terminer immédiatement les animations précédentes.

Exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$('#loadingPhotos').finish().fadeIn(600, function() {
 
                $('#photosSelectorParent').removeClass('photosSelectorOpen');
                $('#gallery > ul').empty().load('_photos_album1.inc.php', function() {        
                    $('#gallery > ul > li:gt(0)').hide(0);                    
                });
 
                $(this).finish().delay(1000).fadeOut(1200, function() {
                    $('#photosSelectorParent').addClass('photosSelectorOpen');
                    $nextTimeoutId = setTimeout(function() {launchGallerySlider($ClickedPhoto);}, 6000);                    
                });
 
            });

[Invité]

Merci pour cette réponse, j'ai vu une lueur d'espoir mais maintenant il n'y a carrément plus d'affichage du tout...

[SpaceFrog]

regarde du coté de stop()...

[danielhagnoul]

Le problème c'est un jQuery obsolète ! Nous en sommes à la version : "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js".

La méthode stop() est obsolète.

[SpaceFrog]

http://api.jquery.com/stop/

Ils ne le disent pas

[danielhagnoul]

http://api.jquery.com/stop/

Ils ne le disent pas

C'est vrai !

Mais je garde le souvenir de http://blog.jquery.com/2013/01/09/jq...-rc1-released/

New! .finish() Method

jQuery animations have gotten even better, and our API improved in the process. It all started with a suggestion to eliminate the Boolean trap posed by the .stop(Boolean, Boolean) signature. During that discussion it became clear that we didn’t have a way to handle one of the most useful cases: running all queued animations to their final value. So we added one, .finish(). The best way to show its benefits is with an example.

As you can see from the example, most uses of the .stop() API requiring Boolean arguments can be replaced with some combination of .stop() (with no arguments), .clearQueue() and/or .finish() and be less cryptic. We’re not removing the old behavior though, so any existing code should work fine. We’d prefer that you use .finish() when appropriate, since it reads better and avoids confusing Boolean parameters. And, when you need to go to the end of a whole series of animations, .finish() will do that in 1.9 when nothing would before.

[Invité]

Merci de vos conseils, cependant en essayant le .stop() cela coupe mon animation au milieu de son déroulement. Ce qui fiche en l'air toute l'interface de l'utilisateur...

danielhagnoul c'est de moi dont il est question je suppose, mais cela est-il grave ?

Le problème c'est un jQuery obsolète ! Nous en sommes à la version : "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js".

J'ai changé par la nouvelle version.

[danielhagnoul]

Bien oui ! Je vois un : <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>.

Avec la dernière version de jQuery, la méthode finish() fera son boulot.

Voir le code exemple du message n° 6.

[Invité]

ça a l'air de fonctionner !
Qu'en pensez-vous d'un point de vue extérieur ?

Merci à vous

Comment puis-je être sûr si j'ai utilisé la "bonne façon" de procéder face à ce problème ?

[SpaceFrog]

.stop accepte 2 paramètres ...

[Invité]

Et bien non en fin de compte cela ne fonctionne toujours pas

Si j'utilise le .finish() l'effet visuel est bien, sauf que les diapos de tous albums défilent d'un coup...

[danielhagnoul]

Je vous suggère de regarder la démonstration en fin de http://api.jquery.com/finish/ et de tester les différentes possibilités.

[Invité]

Bonjour,

Désolé de ce retard, beaucoup de travail.

En effet, j'ai lu précisément la documentation et je comprends mieux le fonctionnement, il fallait que je rajoute le .clearQueue() avant le .finish().

L'animation semble plutôt réussie.


Merci de votre aide.