Appel fonction JS unique

Version imprimable

Salut !!! :ccool:

Alors je vous avoue que j'ai eu du mal à trouver le titre du sujet et je pense que c'est pour ça que je n'ai pas pu trouver de réponse, c'est parceque je ne vois pas comment décrire mon probléme en quelque mots.

Je me lance :
J'ai une application Web avec un menu horizontal (ul) contenant les liens vers les differentes parties de l'application (li --> a)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14  <ul class="onglets"> <li class="onglets"> <a class="onglets" onclick="javascript:logout(); return false;" href="#"> Logout</a> <em><img src="../images/lock.png" id="logout" height="25px" alt="#" /><br />Good Bye ...</em> </li> <li class="onglets"> <a class="onglets" href="../php/home.php"> Home</a> <em><img src="../images/home.png" id="home" height="25px" alt="#" /><br />Go to Home</em> </li> </ul>
Au survol du lien (a) une fonction javascript/JQuery est appelé. Elle fait apparaitre un genre d'infobulle personnalisée au dessus du lien avec le code du em suivant ...
Code:

1 2 3 4 5 6 7 8 9 10 <script type="text/javascript"> $(document).ready(function(){ $(".onglets a").hover(function() { $(this).next("em").animate({opacity: "show", top: "-90"}, "slow"); }, function() { $(this).next("em").animate({opacity: "hide", top: "-105"}, "fast"); }); }); </script>
Tout marche trés bien mais je me suis aperçu que si je survole rapidement cette zone 10 fois par exemple, la fonctio va etre exécutée 10 fois a la suite même si la souris n'est plus du tout dans cette zone ...

Donc ce que je voudrais faire c'est qu'un fois la fonction lancée elle ne soit plus "relançable" avant la fin de l'animation ...

Je ne sais pas si vous avez compris mon probléme.
Peut être arrété les listener d'evenement mais alors un survol sur un autre onglet ne sera pas pris en compte. Peut on arreter le listener que pour un objet (le li qui est est en cours d'animation ???) ?

Merci d'avance !!
Muy Bien

05/06/2009, 09h04
Federico_muy_bien

précisions

bon alors je me suis surement mal exprimé. :?

Ce que je voudrais c'est que lors de l'éxecution de la fonction javascript elle ne soit pas "ré-appelable" pour le même objet (ici l'id de mon <a>).

Il y aurait-il une fonction existante permettant de tester l'éxecution d'une fonction pour un objet ? Ou un bout de code vérifiant l'id du a pour lequel la fonction est en cours d'éxecution ?

J'espere m'être mieux exprimé. Je cherche de mon coté mais je ne trouve pas. Je pense pourtant que c'est d'une grande utilité .... :aie:
05/06/2009, 09h15
le_chomeur
il faut que tu ajoutes un boolean , permettant de savoir si l'action est en cours sur l'objet :) ( exemeple :

objet.action = true ; // dès que tu lance l'anim

puis une condition AVANT de lancer l'anim :

si action est a false on la lance
Code:

1 2 if(objet.action == false){ }
et tu remet action a false une fois terminé :)

Merci LeChomeur :ccool:
Je voyais tellement compliqué que je pensais pas à un truc simple ... :aie:

mais ça a beau être simple je n'arrive pas à le mettre en place ... re:aie:
voici le code qui marche mais qui repete l'action

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
	<script type="text/javascript">
                $(document).ready(function(){
                                $(".onglets a").hover(function() {
                                                $(this).next("em").animate({opacity: "show", top: "-90"}, "slow");
                                                }, function() {
                                                $(this).next("em").animate({opacity: "hide", top: "-105"}, "fast");
                                                });
                                                
                        }
                });
        </script>

j'ai essayé de faire ça mais. Je declare un var unique (donc normalement aucune autre li ne peut executer la fonction en meme temps. Je ferai avec l'id specifique quand j'aurai compris le fonctionnement)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
	<script type="text/javascript">
                $(document).ready(function(){
                        var action ;
                                $(".onglets a").hover(function() {
                                        if(action == false){
                                                action = true ;
                                                $(this).next("em").animate({opacity: "show", top: "-90"}, "slow");
                                                }, function() {
                                                $(this).next("em").animate({opacity: "hide", top: "-105"}, "fast");
                                                });
                                                action = false ;
                                        }
                        }
                });
        </script>

Du coup la fonction est jamais lancée ... :aie:

Essaye ça pour voir, je ne suis pas du tout sûr du résultat :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
		$(document).ready(function(){
			var action ;
				$(".onglets a").hover(function() {
					if(action != true){
						$(this).next("em").animate({opacity: "show", top: "-90"}, "slow");
						}, function() {
						$(this).next("em").animate({opacity: "hide", top: "-105"}, "fast");
						action = true ;
						});
 
					}
			}
		});

05/06/2009, 10h04
le_chomeur

arf c du jquery ( je rame avec ça ^^ )

mais l'idée est la ;)

Citation:
Envoyé par Niki59
Essaye ça pour voir, je ne suis pas du tout sûr du résultat :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 $(document).ready(function(){ var action ; $(".onglets a").hover(function() { if(action != true){ $(this).next("em").animate({opacity: "show", top: "-90"}, "slow"); }, function() { $(this).next("em").animate({opacity: "hide", top: "-105"}, "fast"); action = true ; }); } } });
Merci mais ça ne marche pas ... je viens de me rendre compte que le if action se termine au niveau de function .. (voir plus haut en rouge ...)
En fait c'est du JQuery. Le code se compose comme ça :
document.fonction({fonction1})
avec function1 = hover.({function1},{function2})
avec function2 qui se declenche quand function1 est finie ...

du coup je vois pas mettre le if (action != true) ...