Empêcher plusieurs événements

Version imprimable

22/09/2013, 21h18
Invité

Empêcher plusieurs événements

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
22/09/2013, 21h33
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/.
22/09/2013, 21h54
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
22/09/2013, 21h59
danielhagnoul

Sans les codes (CSS, HTML, JS) pour examiner le problème...
23/09/2013, 08h17
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 :mrgreen:

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:

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);                    
                });
 
            });

23/09/2013, 10h23
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... :(
23/09/2013, 10h28
SpaceFrog

regarde du coté de stop()...
23/09/2013, 10h54
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.
23/09/2013, 11h10
SpaceFrog

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

Ils ne le disent pas :(
23/09/2013, 11h51
danielhagnoul

Citation:

Envoyé par SpaceFrog

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/

Citation:

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.
23/09/2013, 12h02
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... :roll:

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

Citation:

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.
23/09/2013, 12h08
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.
23/09/2013, 12h26
Invité

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

Merci à vous :ccool:

Comment puis-je être sûr si j'ai utilisé la "bonne façon" de procéder face à ce problème ?
23/09/2013, 12h28
SpaceFrog

.stop accepte 2 paramètres ...
23/09/2013, 14h06
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... :mur:
23/09/2013, 22h52
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.
25/09/2013, 10h51
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. :ccool: